2.BootStrap的Modal模态框出现与隐藏_判断boostrap模态层是否存在-优快云博客

本文链接：https://blog.youkuaiyun.com/duhasohfsig/article/details/111504254

本文介绍了如何使用BootStrap实现模态框的显示与隐藏，包括在HTML中设置模态框框架，通过按钮点击事件触发模态框弹出，以及在模态框基础上动态切换和关闭模态框内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在需要弹出模态框的html的body里固定一个框架

<!-- 弹出窗口 -->
	<div class="modal fade" id="addWaitArchivesDlg">
		<div class="modal-dialog">
			<div class="modal-content"></div>
		</div>
	</div>

2.在添加按钮上定义一个点击事件，点击后弹出模态框，url的地址引用是模态框的内容

function newArchive(){
		//设置弹窗样式的宽度，第二层div,dialog设置
		$('#addWaitArchivesDlg .modal-dialog').css({
			'width':function(){
				return '750px';
			}
		});

		url = "addNewArchive.jsp";
		$('#addWaitArchivesDlg .modal-content').load(url, function(){
	    	$('#addWaitArchivesDlg').modal({show:true, backdrop: 'static'});
	     });
	}

3.在模态框基础上，如果需要加载另一个模态框选择案卷号，可以在查询案卷按钮上绑定点击事件，把addWaitArchivesDlg隐藏，并弹出新的模态框。

function choose(){
   $('#addWaitArchivesDlg').modal('hide');
   
   //如果addWaitArchivesDlg发生了隐藏事件，那么就弹出案卷框
   url = "chooseArchiveNoDlg.jsp"
   $('#chooseArchiveNoDlg .modal-dialog').css({
	   'width': function(){
		   return '750px';
	   }
	});
   
   $('#chooseArchiveNoDlg .modal-content').load(url, function(){
 	   $('#chooseArchiveNoDlg').modal({show:true, backdrop: 'static'});
  }); 
}

4.选好案卷号，关闭chooseArchiveNoDlg时，重新打开addWaitArchivesDlg

 $('#chooseArchiveNoDlg').on('hidden.bs.modal',function(){
	    $('#addWaitArchivesDlg').modal({show:true, backdrop: 'static'});
     });