bootstrap怎么弹出窗口

Question

bootstrap怎么弹出窗口

Answer 1

弹出窗口，你说的应该是模态框吧。

示例代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                 <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>             </div>             <div class="modal-body">在这里添加一些文本</div>             <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                 <button type="button" class="btn btn-primary">提交更改</button>             </div>         </div><!-- /.modal-content -->     </div><!-- /.modal --></div>

 

Answer 2

使用jquery更改bootstrap弹出框的内容，可以使用Jquery的load()方法，动态加载不同的模态框（弹出框）内容，然后填充到页面的弹出框div中：

主页面只保留弹出框最外面的那个div

1	<div class="modal fade" id="myModal"> </div>

动态加载的弹出框内容页面中包括bootstrap模态框中的head、body和footer部分

1 2 3 4 5 6 7 8 9

<div class="modal-header">        <h3>模态框header </h3>   </div>    <div class="modal-body">        <p>模态框body</p>   </div>    <div class="modal-footer">        <p>模态框footer</p>    </div>

利用jquery的load()方法，在点击不同的按钮时动态先动态加载内容到模态框的div中，然后再让bootstrap显示

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script>   // 模态对话框隐藏时移除数据   $("#myModal").on("hidden", function() {             $(this).removeData("modal");   });    // 显示模态对话框   var showModal = function() {        var remote = "/test/showModal";       if (remote != "") {             $("#myModal").load(remote, function() {                 $("#myModal").modal('show');            });   }};   </script>

其中showModal函数可以由按钮控制。