adminLTE模态框弹出页面样例[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

项目中引用adminLTE前端框架，弹出页面是模态框方法， 下面是某个detail.html文件

<div class="modal fade" id="viewDialog" role="viewDialog" aria-hidden="true">
        <div class="modal-dialog modal-full">
           <div class="modal-content">
              <div class="modal-header" style="padding:10px !important;padding-bottom:5px;border-bottom:0px !important;">
			    <input type="button" value="上一张" onClick="javascript:maskprev(this)" style="margin-left:185px;">
			    <input type="button" value="下一张" onClick="javascript:masknext(this)" style="margin-left:60px;">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
	         </div>
              <div class="modal-body mask-layer-imgbox" style="padding-top:0px;text-align:center;"><!-- height:480px;width:600px -->
                 
              </div>
           </div>  
           <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
     </div>

点击某个按钮或链接，弹出模态框 

<a data-toggle=”modal” onClick=”javascript:viewFile()” href=”#” data-target=”#viewDialog”>派遣</a>

<script> 
function viewFile() {

	$('#viewDialog').modal({
	     backdrop:"static",
	     keyboard:false,
	     show: true
	});
}
</script>

js弹出模态框还有一种写法

function showPage() {
	 $('#viewDialog').off().on('shown.bs.modal', function(){
	    //...处理一些前台传值等

 	}); 
}

展示效果如下 ：