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

文章插图
在最后台页面的时候，我们常常会用到一个弹层对话框来确认用户的操作或者是获取一些数据的输入。在网上有些现成的插件是可以实现这个功能的，为了方便大家理解这个原理我们自己动手来实现这个效果。
我们以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;}});基本运行流程是：当我们单击按钮后，按钮会读取属性值action，用来判断当前的操作是否为弹出对话框操作，如果是的话就读取geturl属性值取得预设的对话框模板地址，然后提交给get方法获取数据（这里的get是Jquery封装好的一个方法，是异步获取数据的一种），在回调函数里写上获取数据后的处理方式，将返回的数据填入动态添加的层里，并显示出来，这样就实现了弹层效果。是不是很简单呢？
一下就是最终效果了

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：