ss52s(jQuery实现弹层对话框来确认用户操作)

cesc

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

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

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

Jquery实现简单的弹出对话框

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();});

初始化的时候我们将这个层隐藏起来,第二段代码是注册一个对话框的关闭操作。

Jquery实现简单的弹出对话框

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实现简单的弹出对话框

随机文章

Yelp introduces “Proof of vaccination required” and “Staff fully vaccinated” profile attributes
英雄联盟多玩网(整合营销品牌站新品推广的最强模式)
小小课堂:【引流推广新方式】今日头条号扩展链接
小小课堂:易百讯 – 如何来保护网站品牌词?
按键精灵传递数组参数
抵押与抵押支撑证券-网赚妈妈
054 选择任务-阎川魔鬼游戏
2.27DNF体验服更新-初音套即将上线 但这些玩家却无法购买

百度搜索“错误博客”即可找到本站,微信搜索“cuowucom”关注错误博客公众号。错误博客( cuowu.com )欢迎用户投稿,发布者:用户投稿,文章版权归作者所有,投稿文章不代表错误博客立场,中二少年发布为错误博客原创文章,转载请注明出处:https://cuowu.com/28009.html