在最后一页，我们经常会用一个弹回对话框来确认用户的操作或者得到一些数据输入。网上一些现成的插件可以实现这个功能。为了方便大家理解这个原理，我们自己做。

以thinKphp框架为例，做好以下准备:

1.准备Jquery.js文件，下载这个文件并保存。最新版本是jQuery 3.3.1，这个百度一下就能找到下载地址。

2.准备好页面模板，也就是需要弹出对话框的页面，也叫父页面。

3.准备图层模板，就是用来显示用户操作内容的页面。

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.定义一个点击事件并执行弹出命令。在这个逻辑中，我们需要指定一个url地址指向需要弹出的模板(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;}});

基本操作过程是:当我们点击按钮时，按钮会读取属性值动作，判断当前操作是否是弹出对话框操作。如果是，读取geturl的属性值获取预置的对话框模板地址，然后提交给get方法获取数据(这里get是Jquery封装的方法，是一种异步数据获取)。在回调函数中编写数据采集后的处理方法，将返回的数据填充到动态添加的图层中，并显示出来，从而实现。是不是很简单？

是最后的效果。