如何在不关闭当前模式的情况下打开新模式
Posted
技术标签:
【中文标题】如何在不关闭当前模式的情况下打开新模式【英文标题】：How to Open a new modal WITHOUT closing the current modal 【发布时间】：2019-02-24 21:12:51 【问题描述】：是否可以打开一个不会关闭当前模态的模态？
我有这个代码，我可以在这个页面中获得。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example
<!--from ww w .j a v a 2s .co m-->margin: 20px;
</style>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch
Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<label>ID</label> <input type="text"><br><br>
<input type="button" value="Take Photo">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>我想要发生的是，当我单击模态内的“拍照”按钮时，它将打开一个新模态，该模态不会关闭其他模态或当前模态，非常感谢..
【问题讨论】：
【参考方案1】：你想要这样的东西吗？
https://codepen.io/Sachin4dotnet/pen/KxJQMX
HTML：
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal 1</h4>
</div>
<div class="modal-body">
<form role="form" action='#' method="post">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="signin">Sign In Now</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal 2</h4>
</div>
<div class="modal-body">
<p>Sign In Error</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Javascript：
//trigger next modal
$("#signin").on( "click", function()
$('#myModal2').modal('show');
);
还有另一种更好的选择，但有更多的 JS/CSS - https://codepen.io/maouida/pen/NPGaaN
【讨论】：
以上是关于如何在不关闭当前模式的情况下打开新模式的主要内容，如果未能解决你的问题，请参考以下文章
如何在不从当前活动选项卡中获取焦点的情况下将子窗口添加到 QMdiArea（设置为 TAB 模式）？