本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01jquery模态框的特点-jq最简单的模态框

在最后一页，大家常常应用一个shell提示框来确定客户的实际操作或是了解一些数据信息键入。在网上有一些网站的软件可以完成这一作用。为了更好地让大伙儿非常容易了解这一基本原理，我们可以自身做到这一实际效果。

使我们以thinkphp为例子，做下列准备工作:

1.提前准备Jquery.js文件，免费下载这一文档并储存。最新版是jQuery 3.3.1，百度一下就能寻找下载链接。

2.提前准备一个页面设计，便是必须弹出窗口的网页页面，也叫父网页页面。

3.提前准备延展性层模版，用以表明提醒客户实际操作內容的网页页面。

4.布署THINKphp的架构，确保3D渲染模版能够一切正常浏览(这一点请参照TP的布署实例教程)。自然，您能够采用不应用这一，还可以立即搭建http浏览方式。

进行之上准备工作后，使我们一起来看看重要编码:

1.向父网页页面加上文档引入，向原始网页页面加上透明层。JS编码精彩片段如下所示。

var msgboxhtm="";$("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封裝的方式，是一种多线程数据获取)。在析构函数中，大家将在读取数据后撰写解决方式，并将回到的数据信息补充到动态性加上的涂层中并表明出去，进而完成。并不是非常简单吗？

这也是最终的实际效果。