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

在最后台页面的时候,我们常常会用到一个弹层对话框来确认用户的操作或者是获取一些数据的输入。在网上有些现成的插件是可以实现这个功能的,为了方便大家理解这个原理我们自己动手来实现这个效果。

我们以thinKphp框架下为例,做好以下几个准备工作:

1、Jquery.js文件准备,下载好这个文件存放起来,最新版是 jQuery 3.3.1,这个百度一下就能找到下载地址。

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

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封装好的一个方法,是异步获取数据的一种),在回调函数里写上获取数据后的处理方式,将返回的数据填入动态添加的层里,并显示出来,这样就实现了弹层效果。是不是很简单呢?

一下就是最终效果了

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

(0)
小多多的头像小多多创始人

相关推荐

发表回复

登录后才能评论