標籤：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0;} .login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;} .title{ height:30px; background:gray; color:white;} .title .close{ float:right;} </style> <script type="text/javascript" src="res/js/jquery.min.js"></script> <script type="text/javascript" src="res/js/dialog.js"></script></head><body><input type="button" value="1"><input type="button" value="2"><input type="button" value="3"><script> window.onload = function(){ var aInput = document.getElementsByTagName(‘input‘); aInput[0].onclick = function(){ drag({ //配置參數 iNow : 0, title : ‘登入‘ }); }; aInput[1].onclick = function(){ drag({ //配置參數 iNow : 1, w : 100, h : 400, dir : ‘right‘, title : ‘公告‘ }); }; };</script></body></html>
;(function($, window, document,undefined) { function Dialog(){ this.oLogin = null; this.settings = { //預設參數 w : 300, h : 300, dir : ‘center‘, title : ‘‘, mark : false }; } Dialog.prototype.json = {}; Dialog.prototype.init = function( opt ){ extend( this.settings , opt ); if( this.json[opt.iNow] == undefined ){ this.json[opt.iNow] = true; } if(this.json[opt.iNow]){ this.create(); this.fnClose(); if(this.settings.mark){ this.createMark(); } this.json[opt.iNow] = false; } }; Dialog.prototype.create = function(){ this.oLogin = document.createElement(‘div‘); this.oLogin.className = ‘login‘; this.oLogin.innerHTML = ‘<div class="title"><span>‘+ this.settings.title +‘</span><span class="close">X</span></div><div class="content"></div>‘; document.body.appendChild( this.oLogin ); this.setData(); }; Dialog.prototype.setData = function(){ this.oLogin.style.width = this.settings.w + ‘px‘; this.oLogin.style.height = this.settings.h + ‘px‘; if( this.settings.dir == ‘center‘ ){ this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth)/2 + ‘px‘; this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight)/2 + ‘px‘; } else if( this.settings.dir == ‘right‘ ){ this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) + ‘px‘; this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) + ‘px‘; } }; Dialog.prototype.fnClose = function(){ var oClose = this.oLogin.getElementsByTagName(‘span‘)[1]; var This = this; oClose.onclick = function(){ document.body.removeChild( This.oLogin ); if(This.settings.mark){ document.body.removeChild( This.oMark ); } This.json[This.settings.iNow] = true; }; }; Dialog.prototype.createMark = function(){ var oMark = document.createElement(‘div‘); oMark.id = ‘mark‘; document.body.appendChild( oMark ); this.oMark = oMark; oMark.style.width = viewWidth() + ‘px‘; oMark.style.height = viewHeight() + ‘px‘; }; function extend(obj1,obj2){ for(var attr in obj2){ obj1[attr] = obj2[attr]; } } function viewWidth(){ return document.documentElement.clientWidth; } function viewHeight(){ return document.documentElement.clientHeight; } window.drag=function(opt){ var litdialog= new Dialog(); litdialog.init(opt);}})(jQuery, window, document);
物件導向開發彈窗組件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
