站内共用弹窗及模块扩展
本文共 6332 字，大约阅读时间需要 21 分钟。
网站用到弹窗已经不是什么稀奇的事情了，并且在站内很多页面都用到了大小不一及需求不同的弹窗，so今天就在这里聊一下站内弹窗共用的问题。（兼容各大主流浏览器，但无视IE6）
页面大致是这样的，常见的商品操作列表，列表内每个商品通常有诸多“增删改查”按钮，而这时也就伴随着弹窗的出现。
现在看下列表的html代码：离开页面
接下来我们为页面添加公共的阴影遮罩及弹窗
页面样式如下：
@charset "utf-8";body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,section,article,aside,header,footer,nav,dialog,figure{margin:0;padding:0;font-style:normal;font-weight: normal;font-family:"microsoft yahei","Microsoft YaHei UI"}i,em,b{font-style:normal}table {border-collapse:collapse;border-spacing:0}ul,ol,li {list-style:none}textarea{resize:none;outline: none;overflow-y:hidden;}input {vertical-align:middle;}img {vertical-align:middle;border:none;}input:focus {outline:none}form {resize: none;outline:none;position:relative;z-index:2}a {color:#333;text-decoration:none;outline:none}a:hover {color:#bf0000;}body {font-family:"microsoft yahei","Microsoft YaHei UI",sans-serif;font-size:14px;color:#333}.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix {display:block}.clear {clear:both}.productDiv,.closePage { margin: 20px;}.productDiv a,.productDiv a:hover,.closePage,.closePage:hover { background: #bf0000; color: #fff; border: 1px solid #bf0000;}/*弹窗及遮罩（共用）*/.shade { display: none; width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);}.popupTemplate { display: none; position: fixed; z-index: 11; background: #fff; border: 1px solid #ffd9d9; text-align: center;}.popupTemplate h6 { width: 100%; height: 43px; line-height: 43px; background: #bf0000; color: #fff; font-size: 16px;}.popupTemplate p { line-height: 30px; padding: 35px 0; font-size: 20px; color: #000; text-align: center;}.popupTemplate a.popupBtnClose { position: absolute; right: 0; top: 0; display: block; width: 25px; height: 25px; line-height: 25px; font-size: 16px; color: #f8e2e2;}.popupTemplate a.popupBtnSure, .popupTemplate a.popupBtnCancel { display: inline-block; width: 93px; height: 35px; line-height: 35px; text-align: center; font-size: 16px; background: #f29510; color: #fff;}.popupTemplate a.popupBtnCancel { margin-left: 40px; background: #767676;}/*弹窗状态板块popupState*/.popupState img { margin: 30px 0 -10px;}.popupState p { font-weight: bold; color: #333;} 页面事先引用了jquery 文件，接下来我们要为页面添加比较重要的功能部分了，这部分js代码可以添加到页面公用的js里，等使用弹窗时直接调用就好了
//弹框时调用 popupShowFn($Dom为点击的目标节点，//$width为出现弹窗宽度，//$height为出现弹窗高度，//shade为是否出现阴影遮罩，0为不出现，1为出现//popupMode为出现弹窗的模式，目前为popupMode1及popupMode2两种//$popupTxt为弹窗内预留字段，用来更改弹窗内需要的内容//$nextPopup为是否需要出现下级弹窗，0为不需要下级弹窗，直接触发关闭。1为需要触发下级弹窗 )function popupShowFn($Dom ,$width, $height, shade, popupMode, $popupTxt, $nextPopup){ var $domWidth = $(document).width(), $domHeight = $(document).height(), $winWidth = $(window).width(), $winHeight = $(window).height(), $ScrollHeight = $(document).scrollTop(), $ScrollWidth = $(document).scrollLeft(); if (!!shade) { $(".shade").width($domWidth) .height($domHeight) .show(); } $($Dom).width($width) .height($height) .css({"top":($winHeight-$height)/2 + "px", "left": ($winWidth-$width)/2 + "px"}); if (popupMode == "popupMode1") { $($Dom).children(".popupContent").css("display", "block") .find(".popupTxt").text($popupTxt); $($Dom).children(".popupState").css("display", "none"); } else { $($Dom).children(".popupContent").css("display", "none"); $($Dom).children(".popupState").css("display", "block") .find(".popupTxt").text($popupTxt); } if ($nextPopup == 0) { $(".popupBtnSure").addClass("close"); } $($Dom).show();}$(function(){ //点击弹框关闭按钮 $(".popupBtnClose").click(function(){ $(".popupBtnSure").removeClass("close"); $(".shade").hide(); $(".popupTemplate").hide(); }); //点击弹框取消按钮 $(".popupBtnCancel").click(function(){ $(".shade").hide(); $(".popupTemplate").hide(); });}); 最后我们来添加页面内具体的功能执行代码，也就是弹窗的出现的执行代码哦
$(function(){ var $id;//$id为商品列表内的商品id，此处预先声明，可根据实际需要决定是否保留 //点击列表内“删除/收藏按钮”出现弹框，设定弹窗宽度375px,高度200px,shade为1出现遮罩,popupMode为模式一（popupMode1）， //$popupTxt为“确认删除/收藏”，$nextPopup为1需要出现下级弹窗 $(".productDiv a").click(function(){ $id = $(this).parents("div").attr("id"); $("#operateTxt").val($(this).attr("class")); if ($(this).attr("class") == "delete") { //popupShowFn($Dom ,$width, $height, shade, popupMode, $popupTxt, $nextPopup); popupShowFn(".popupTemplate", 375, 220, 1, "popupMode1", "您确认删除么？", 1); } else { popupShowFn(".popupTemplate", 375, 220, 1, "popupMode1", "您确认收藏么？", 1); } }); //点击弹窗内“确定”按钮，根据该按钮有没有“close”,判断页面是否需要出现下级弹窗 $(".popupBtnSure").on("click", function(){ if (!$(this).hasClass("close")) { $("#" + $id).parent(".ucTemplateTxt").remove(); //$.ajax();//假设返回成功 if ($("#operateTxt").val() == "delete") { //设定弹窗宽度375px,高度200px,shade为1出现遮罩,popupMode为模式二（popupMode2）， //$popupTxt为“已删除/已收藏”，$nextPopup为0不需要出现下级弹窗 popupShowFn(".popupTemplate", 375, 220, 1, "popupMode2", "恭喜您，已删除！", 0); } else { popupShowFn(".popupTemplate", 375, 220, 1, "popupMode2", "恭喜您，已收藏！", 0); } } else { //1、执行相关动作 $(".popupBtnClose").click();//2、触发弹窗关闭按钮使弹窗消失 } }); $(".closePage").click(function(){ //设定弹窗宽度500px,高度300px,shade为0不出现遮罩,popupMode为模式一（popupMode1）， //$popupTxt为“已删除/已收藏”，$nextPopup为0不需要出现下级弹窗 popupShowFn(".popupTemplate", 500, 300, 0, "popupMode1", "您确认离开页面么？", 0); });}); 这样就OK了，让我们来看下，弹窗出现的效果--
点击“删除”按钮出现
点击该弹窗“确认”后
点击“收藏”按钮出现
点击该弹窗“确认”后
点击“离开页面按钮”，此时是没有遮罩的噢！
看，非常自然！
在这里在啰嗦一句，这个模块只适用于网站弹窗出现较多的情况，所以模块共用，如果页面只用到很少的弹窗，也就没有那么大必要啦！偷笑偷笑~~
转载地址：http://vcvum.baihongyu.com/
你可能感兴趣的文章
以打字形式展示placeholder的插件
查看>>
http文件导出写文件
查看>>
Globus的简单介绍
查看>>
[LeetCode] Search Insert Position 解题报告
查看>>
c# 的传递参数值传递与传递引用的区别，ref与out区别
查看>>
win7+vs2008+cuda5.x 环境配置二
查看>>
PHP5.5安装PHPRedis扩展
查看>>
c#Socket Tcp服务端编程
查看>>
java构造函数注意点
查看>>
Asp.net 中配置 CKEditor和CKFinder
查看>>
Use dynamic type in Entity Framework 4.1 SqlQuery() method
查看>>
《Python CookBook2》 第四章 Python技巧 - 若列表中某元素存在则返回之 && 在无须共享引用的条件下创建列表的列表...
查看>>
redhat网卡设置
查看>>
javascript 的作用域
查看>>
JFinal极速开发框架使用笔记(二) 两个问题，一个发现
查看>>
AutoCompleteTextView
查看>>
SecureCRT生成序列
查看>>
Android 应用程序主框架搭建
查看>>
2012腾讯春季实习生面试经历（二）
查看>>
用Bootstrap框架弹出iframe页面 在弹出的模态框中载人iframe页面，bootstrapiframe
查看>>