bootstrap怎么弹出窗口

Question

bootstrap怎么弹出窗口

Answer 1

弹出窗口，你说的应该是模态框吧。示例代码如下：1234567891011121314<h2>创建模态框（Modal）</h2><!--&nbsp;按钮触发模态框&nbsp;--><button&nbsp;class="btn&nbsp;btn-primary&nbsp;btn-lg"&nbsp;data-toggle="modal"&nbsp;data-target="#myModal">开始演示模态框</button><!--&nbsp;模态框（Modal）&nbsp;--><div&nbsp;class="modal&nbsp;fade"&nbsp;id="myModal"&nbsp;tabindex="-1"&nbsp;role="dialog"&nbsp;aria-labelledby="myModalLabel"&nbsp;aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-dialog">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-header">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="close"&nbsp;data-dismiss="modal"&nbsp;aria-hidden="true">&times;</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4&nbsp;class="modal-title"&nbsp;id="myModalLabel">模态框（Modal）标题</h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-body">在这里添加一些文本</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-footer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="btn&nbsp;btn-default"&nbsp;data-dismiss="modal">关闭</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;type="button"&nbsp;class="btn&nbsp;btn-primary">提交更改</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><!--&nbsp;/.modal-content&nbsp;-->&nbsp;&nbsp;&nbsp;&nbsp;</div><!--&nbsp;/.modal&nbsp;--></div>&nbsp;

Answer 2

使用jquery更改bootstrap弹出框的内容，可以使用Jquery的load()方法，动态加载不同的模态框（弹出框）内容，然后填充到页面的弹出框div中：主页面只保留弹出框最外面的那个div1<div&nbsp;class="modal&nbsp;fade"&nbsp;id="myModal">&nbsp;</div>动态加载的弹出框内容页面中包括bootstrap模态框中的head、body和footer部分123456789<div&nbsp;class="modal-header">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h3>模态框header&nbsp;</h3>&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-body">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>模态框body</p>&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;<div&nbsp;class="modal-footer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>模态框footer</p>&nbsp;&nbsp;&nbsp;</div>利用jquery的load()方法，在点击不同的按钮时动态先动态加载内容到模态框的div中，然后再让bootstrap显示1234567891011121314<script>&nbsp;&nbsp;//&nbsp;模态对话框隐藏时移除数据&nbsp;&nbsp;$("#myModal").on("hidden",&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).removeData("modal");&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;//&nbsp;显示模态对话框&nbsp;&nbsp;var&nbsp;showModal&nbsp;=&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;remote&nbsp;=&nbsp;"/test/showModal";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(remote&nbsp;!=&nbsp;"")&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#myModal").load(remote,&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#myModal").modal('show');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;}};&nbsp;&nbsp;</script>其中showModal函数可以由按钮控制。&nbsp;