当前位置: 澳门新濠3559 > 服务器运维 > 正文

弹出框元素插入body节点中

时间:2019-12-26 07:51来源:服务器运维
效果图 基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器。 全部代码 复制代码 代码如下: /** *@author xing */ { $.extend({ alert:function{ var dialog=new Dialog();dialog.build('alert',callback,html); }, confi

效果图

基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器。

全部代码 复制代码 代码如下: /** * @author xing */ { $.extend({ alert:function{ var dialog=new Dialog(); dialog.build('alert',callback,html); }, confirm:function{ var dialog=new Dialog(); dialog.build('confirm',callback,html); } }); var Dialog=function(){ var render={ template:'

思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定。

系统提示

你的操作出现错误!

', templateConfirm:'

注意ie6包含两个问题:
一、select、flash不能遮罩,采用iframe。
二、fixed属性采用滚动时重新计算高度或在样式中采用表达式计算expression。

系统提示

你的操作出现错误!

', /** * 根据需要生成对话框 * @param {Object} type * @param {Object} callback * @param {Object} html */ renderDialog:function{ if{ this.renderAlert; }else{ this.renderConfirm; } }, /** * 生成alert * @param {Object} callback * @param {Object} html */ renderAlert:function{ var temp=$.clone; temp.find.html; $.append; this.setPosition; this.bindEvents('alert',temp,callback); }, /** * 生成confirm * @param {Object} callback * @param {Object} html */ renderConfirm:function{ var temp=$.clone; temp.find.html; $.append; this.setPosition; this.bindEvents('confirm',temp,callback); }, /** * 设定对话框的位置 * @param {Object} el */ setPosition:function{ var width=el.width, pageSize=this.getPageSize(); el.css({ top:/2, left:/2 }); }, /** * 绑定事件 * @param {Object} type * @param {Object} el * @param {Object} callback */ bindEvents:function{ if{ if($.isFunction{ $.click{ callback(); $.remove; }else{ $.click{ $.remove; } }else{ if($.isFunction{ $.click{ callback(); $.remove; }else{ $.click{ $.remove.click{ $.remove; } }, /** * 获取页面尺寸 *澳门新濠3559,/ getPageSize:function(){ return { w:document.documentElement.clientWidth, h:document.documentElement.clientHeight } } } return { build:function{ render.renderDialog; } } } }); 因为我们的alert,并不需要选择器的支持,所以我们采用$.extend这样声明 复制代码 代码如下: $.extend({ alert:function{ }, confirm:function; 其次我们声明一个单体来生成这个组件到页面,这个单体返回一个公共的方法build来创建这个组件 复制代码 代码如下: var Dialog=function(){ return { build:function{ render.renderDialog; } } } 接下来我们分别声明组件的HTML字符串 复制代码 代码如下: var render={
template:'

源码分析:
1、creatHtml:采用doT.js初始化元素添加到body中;
2、show:设置宽度,高度,居中显示;
3、events:为关闭和确定绑定事件;
4、removeCallback:移出元素节点,如有执行回调方法;
5、ie6fixed:ie6中fixed的兼容性处理。

系统提示

你的操作出现错误!

',
templateConfirm:'

参数使用说明:

系统提示

你的操作出现错误!

'}
向里面填充方法 复制代码 代码如下: /** * 根据需要生成对话框 * @param {Object} type * @param {Object} callback * @param {Object} html */ renderDialog:function{ if{ this.renderAlert; }else{ this.renderConfirm; } }, /** * 生成alert * @param {Object} callback * @param {Object} html */ renderAlert:function{ var temp=$.clone; temp.find.html; $.append; this.setPosition; this.bindEvents('alert',temp,callback); }, /** * 生成confirm * @param {Object} callback * @param {Object} html */ renderConfirm:function{ var temp=$.clone; temp.find.html; $.append; this.setPosition; this.bindEvents('confirm',temp,callback); }, /** * 设定对话框的位置 * @param {Object} el */ setPosition:function{ var width=el.width, pageSize=this.getPageSize(); el.css({ top:/2, left:/2 }); }, /** * 绑定事件 * @param {Object} type * @param {Object} el * @param {Object} callback */ bindEvents:function{ if{ if($.isFunction{ $.click{ callback(); $.remove; }else{ $.click{ $.remove; } }else{ if($.isFunction{ $.click{ callback(); $.remove; }else{ $.click{ $.remove.click{ $.remove; } }, /** * 获取页面尺寸 */ getPageSize:function(){ return { w:document.documentElement.clientWidth, h:document.documentElement.clientHeight } } 接下来就是对话框的实现 复制代码 代码如下: $.extend({ alert:function{ var dialog=new Dialog(); dialog.build('alert',callback,html); }, confirm:function{ var dialog=new Dialog(); dialog.build('confirm',callback,html); } }); 调用方法: 复制代码 代码如下: $.confirm{ alert;

$.alert;

最后就是CSS与HTML 了 复制代码 代码如下: div.alertParent{ padding:6px; background:#ccc; background:rgba; width:auto; position:absolute; -moz-border-radius:3px; font-size:12px; top:50px; left:50px; } div.alertContent{ background:#fff; width:350px; height:auto; border:1px solid #999; } h2.title{ width:100%; height:28px; background:#0698E9; text-indent:10px; font-size:12px; color:#fff; line-height:28px; margin:0; } div.alertHtml{ background:url 0 0 no-repeat; height:50px; margin:10px; margin-left:30px; text-indent:50px; line-height:50px; font-size:14px; } div.btnBar{ border-top:1px solid #c6c6c6; background:#f8f8f8; height:30px; } div.btnBar input{ background:url no-repeat; border:0; width:63px; height:28px; float:right; margin-right:5px; } html 复制代码 代码如下:

width:定义弹出框的宽度,默认值是400。
height:定义弹出框的高度,默认值是100.
title:定义弹出框的标题,默认值是空。
html:定义弹出框的内容,默认值是空。
type:定义弹出框的类型,默认值是default,其他conform和alert。
closed: 标题栏中的关闭按钮,回调方法,默认为null。
conform:包含name指按钮的名称,默认值为确定,callback回调方法,默认值为null。
cancel:包含name指按钮的名称,默认值为取消,callback回调方法,默认值为null。
备注:如果使用conform或alert时,不设置type类型是不起作用。

系统提示

你的操作出现错误!

高手勿笑,为了说明实现的方式,我并没有仔细的去完善这段代码,仅仅是在写作的半小时内写出的,所以有很多地方没有去思考,有很多的纰漏,并且以一个比较笨的方式实现了这个模拟的alert,不过下次我们将通过构建Button的方式实现一个组件,会加入遮罩,ajax调用,iframe宽度高度自适应等更强大的功能。

放在页面底部,作为公用部分:
澳门新濠3559 1

使用方法:

$.Dialog.init({
    height: 180,
    title: "弹出框",
    html: "亲,默认弹出框哦",
    closed: function() {
        alert("关闭");
    }
});

github地址:https://github.com/benpaobenpao/dialog

DEMO:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>dialog弹出框benpaobenpao</title> <style> *{margin:0px;padding: 0px;} .clearfix{*zoom:1;} .clearfix:after{content:"020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} .dialogbg{display:block; *zoom:1; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; opacity: 0.35;filter:alpha(opacity=30); background: #ccc;z-index: 9999;} .dialogbox{position: fixed;_position: absolute;-webkit-box-shadow: 0px 0px 6px #999;border: 1px solid #ccc;box-shadow: 0px 0px 3px #999;border-radius: 6px; z-index: 99999;left: 50%;top: 50%;background: #f5fffa;overflow: hidden;} .dialogboxrunstart{-webkit-transform: scale(0px,0px);-webkit-transition:all 0.2s ease-in-out;-moz-transform: scale(0px,0px);-moz-transition:all 0.2s ease-in-out;-ms-transform: scale(0px,0px);-ms-transition:all 0.2s ease-in-out;-o-transform: scale(0px,0px);-o-transition:all 0.2s ease-in-out;transform: scale(0px,0px);transition:all 0.2s ease-in-out;} .dialogtit{position: relative;height: 30px; line-height: 30px; overflow: hidden;padding: 0px 10px;border-bottom: 1px solid #274863;font-size: 16px;background: #4682b4;} .dialogclosed{position: absolute;right: 10px;color: #fff;font-weight: 700;font-size: 20px;cursor: pointer;} .dialogclosed:hover{color: #f00;} .dialogtxt{color: #fff;font-weight: 700;margin-right: 20px;} .dialogmain{padding: 10px 20px 10px 20px;} .dialogBtns{text-align: center;padding-top: 5px;} .dialogconform,.dialogcancel{display: inline-block;*display: inline;*zoom:1;padding: 0px 10px;height: 24px;line-height: 24px;color: #fff;font-size: 12px;border-radius: 4px;background: #005eac;border-width: 1px;border-style: solid;border-color: #b8d4e8 #124680 #124680 #b8d4e8;cursor: pointer;} .dialogcancel{margin-left: 10px;} .dialogconform:hover,.dialogcancel:hover{background: #0000ff;} </style> <script src="; <script src="; <style> body{height: 1500px;} .main{width: 960px; margin: 60px auto 0px; } .main .btn{width: 100px; height: 30px; line-height: 30px; text-align: center; cursor: pointer;} .mtable{ height: 100px; overflow-y: auto;} .mtable table{width: 100%; text-align: center;} .mtable table th, .mtable table td{padding:10px 0px;} </style> </head> <body> <div class="main"> <div> <img src="" /> <select><option>one</option><option>two</option></select> 弹出框插件测试。。。 </div> <div> 点击测试: <input class="btn" id="btndef" type="button" value="default" /> <input class="btn" id="btnconf" type="button" value="confirm" /> <input class="btn" id="btnal" type="button" value="alert" /> <p>使用conform、alert必须制定其type类型,type默认值是default。</p> </div> </div> <script id="arrtmpl" type="text/x-dot-template"> <div class="mtable"> <table > <thead> <tr> <th>第一项</th> <th>第二项</th> <th>第三项</th> </tr> </thead> <tbody> {{~it.array:value:index }} <tr> <td>{{= value.one }}</td><td>{{= value.two }}</td><td>{{= value.three }}</td> </tr> {{~}} </tbody> </table> </div> </script> <script id="dialogtmpl" type="text/x-dot-template"> {{? it.isIE6===false }} <div id="dialogbg" class="dialogbg"></div> {{?? }} <iframe id="dialogbg" class="dialogbg"></iframe> {{?}} <div id="dialogbox" class="dialogbox"> <div class="dialogcont"> <div class="dialogtit clearfix"> <a class="dialogclosed" title="关闭">⊗</a> <div class="dialogtxt">{{=it.title}}</div> </div> <div class="dialogmain">{{=it.html}}</div> {{? it.type === "conform"}} <div class="dialogBtns"><a class="dialogconform">{{=it.conform.name||"确定"}}</a></div> {{?? it.type === "alert"}} <div class="dialogBtns"><a class="dialogconform">{{=it.conform.name||"确定"}}</a><a class="dialogcancel">{{=it.cancel.name||"取消"}}</a></div> {{?}} </div> </div> </script> <script> (function($) { $.Dialog = { init: function(options) { var _this = this, defaults = { width: "400", height: "100", title: "", html: "", type: "default", // default conform alert closed: null, conform: { name: "确定", callback: null }, cancel: { name: "取消", callback: null } }; options.isIE6 = !! window.ActiveXObject && !window.XMLHttpRequest; _this.options = $.extend({}, defaults, options); _this.creatHtml(); _this.show(); _this.events(); if(_this.options.isIE6){ _this.ie6fixed(); } }, creatHtml: function() { var _this = this; var interText = doT.template($("#dialogtmpl")[0].text); $("body").append(interText(_this.options)); }, show: function() { var _this = this; _this.dialogbg = $("#dialogbg"); _this.dialogbox = $("#dialogbox"); _this.dialogbg.css({ "height": $(document).height() }); _this.dialogbox.css({ "margin-top": (-_this.options.height / 2) + "px", "margin-left": (-_this.options.width / 2) + "px", "width": _this.options.width + "px", "height": _this.options.height + "px" }); _this.dialogbox.addClass("dialogboxrunstart"); }, events: function() { var _this = this; _this.dialogclosed = _this.dialogbox.find(".dialogclosed"); _this.dialogconform = _this.dialogbox.find(".dialogconform"); _this.dialogcancel = _this.dialogbox.find(".dialogcancel"); _this.dialogclosed.on("click", function() { _this.removeCallback(_this.options.closed); }); _this.dialogconform.on("click", function() { _this.removeCallback(_this.options.conform.callback); }); _this.dialogcancel.on("click", function() { _this.removeCallback(_this.options.cancel.callback); }); }, removeCallback: function(call) { var _this = this; _this.dialogbg.remove(); _this.dialogbox.remove(); !! call && call(); }, ie6fixed: function() { var _this = this; $(window).scroll(function() { _this.dialogbox.css({ "top": (($(window).height() - _this.options.height) / 2 + $(document).scrollTop()) + "px" }); }); } } })(jQuery); </script> <script> (function($) { $("#btndef").click(function() { $.Dialog.init({ height: 180, title: "弹出框", html: "亲,默认弹出框哦", closed: function() { alert("关闭"); } }); }); $("#btnconf").click(function() { $.Dialog.init({ height: 100, html: "", type: "conform", conform: { name: "确认按钮哦哦哦哦" } }); }); $("#btnal").click(function() { var arr = { "array": [{ "one": "1", "two": "2", "three": "3" }, { "one": "11", "two": "22", "three": "33" }, { "one": "111", "two": "222", "three": "333" }, { "one": "1111", "two": "2222", "three": "3333" }, { "one": "11111", "two": "22222", "three": "33333" }, { "one": "111111", "two": "222222", "three": "333333" }] }; var interText = doT.template($("#arrtmpl")[0].text); var html = interText(arr); $.Dialog.init({ height: 190, html: html, type: "alert", conform: { callback: function() { alert("确定"); } }, cancel: { callback: function() { alert("取消"); } } }); }); })(jQuery); </script> </body> </html>

运行代码

编辑:服务器运维 本文来源:弹出框元素插入body节点中

关键词: