jquery模态框的特点_jq最简单的模态框

jquery模态框的特点_jq最简单的模态框 在最后台页面的时候，我们常常会用到一个d层对话框来确认用户的 *** 作或者是获取一些数据的输入。

在网上有些现成的插件是可以实现这个功能的，为了方便大家理解这个原理我们自己动手来实现这个效果。

我们以thinKphp框架下为例，做好以下几个准备工作：1、Jquery.js文件准备，下载好这个文件存放起来，最新版是 jQuery 3.3.1，这个百度一下就能找到下载地址。

2、准备页面模板，也就是需要在上面d出对话框的页面，也叫父页面。

3、准备d层模板，这个d层模板就是用来显示提示用户 *** 作内容的页面。

4、部署好THINKphp的框架，确保可以正常访问渲染模板（这个请参考TP的部署教程），当然你也可以选择不用这个，直接搭建http的访问模式也是可以的。

做好以上准备工作以后我们来看一下关键代码：1、在父页面添加文件引用，并在初始页面的时候添加一个透明层，JS代码片段如下var msgboxhtm="<div class="msgbg" id="msgbg"></div>";$("body").append(msgboxhtm);$(".msgbg").hide();$(".msgbox").find("h1").click(function(){$(".msgbg").hide();});初始化的时候我们将这个层隐藏起来，第二段代码是注册一个对话框的关闭 *** 作。

2、定义一个点击事件，执行d出命令，在这个逻辑里我们需要指定一url地址，指向需要d出的模板（tinkphp就直接指向一个控制器就行了）。

本例中geturl就是这个地址，这个地址使用get方式获取数据。

$(".button").click(function(){var action=$(this).attr("action");var geturl=$(this).attr("geturl");switch(action){case"showdialog":var result="";$.get(geturl,function(result){$(".msgbg").html(result);});$(".msgbg").fadeIn(500);$(".msgbox").fadeIn(500);break;case"closebox":$(".msgbg").hide();break;default:break;}});基本运行流程是：当我们单击按钮后，按钮会读取属性值action，用来判断当前的 *** 作是否为d出对话框 *** 作，如果是的话就读取geturl属性值取得预设的对话框模板地址，然后提交给get方法获取数据（这里的get是Jquery封装好的一个方法，是异步获取数据的一种），在回调函数里写上获取数据后的处理方式，将返回的数据填入动态添加的层里，并显示出来，这样就实现了d层效果。

是不是很简单呢？一下就是最终效果了