Js彈出層，彈出框代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>彈出層效果</title>

html, body {height:100%;}

body, h2, p {margin:0px;padding:0px; font-size:12px;}

body {font-size:12px; text-align:center; }

.alert_backg {width:100%;height:100%;top:0px;left:0px;position:absolute;background:#000;opacity:0;filter:alpha(opacity:0)}

.alert_frame {width:340px;height:120px;top:50%;left:50%;position:absolute;display:inline;margin:-60px 0 0 -170px;opacity:0;filter:alpha(opacity:0)}

.alert_frame .top_l {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat;}

.alert_frame .top_c {width:330px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-x;}

.alert_frame .top_r {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat -5px 0;}

.alert_frame .con {width:100%;height:110px;float:left;overflow:hidden;}

.alert_frame .con_l {width:5px;height:100%;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-y;}

.alert_frame .con_c {width:330px;height:100%;float:left;overflow:hidden;background:#fff;}

.alert_frame .con_r {width:5px;height:100%;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-y;}

.alert_frame .bot_l {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat 0 -5px;}

.alert_frame .bot_c {width:330px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-x;}

.alert_frame .bot_r {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat -5px -5px;}

.alert_frame .alert_tit {width:328px;height:27px;float:left;color:#000;line-height:27px;border:1px solid #fff;background:url(/jscss/demoimg/201109/alert_tit_bg.jpg) repeat-x;}

.alert_frame .alert_tit h2 {float:left;text-indent:10px;font-size:14px;font-weight:bold;font-family:"\u5FAE\u8F6F\u96C5\u9ED1";}

.alert_frame .alert_tit em {width:8px;height:7px;overflow:hidden;float:right;cursor:pointer;background:url(/jscss/demoimg/201109/gnbimgs.gif) no-repeat;display:inline;margin:10px 10px 0 0;}

.alert_frame .alert_tit em.hove {background:url(/jscss/demoimg/201109/gnbimgs.gif) no-repeat -8px 0;}

.alert_frame .alert_con {width:330px;height:81px;float:left;border-top:1px solid #e5e5e5;}

.size {width:100%;height:45px;text-align:center;line-height:45px;color:#000;}

.but {width:100%;height:22px;text-align:center;line-height:22px;}

.button {width:55px;height:22px;text-align:center;line-height:22px;color:#fff;background:url(/jscss/demoimg/201109/but.jpg) no-repeat;border:none;display:inline;margin:0 8px;cursor:pointer;}

.title {width:800px;height:35px;color:#fff;line-height:35px;font-family:Verdana;font-weight:bold;text-align:left;margin:20px auto 0 auto;font-size:24px;}

.table {width:800px;height:auto;overflow:hidden;margin:0 auto 20px auto;font-size:12px;border-top:1px solid #ddd;border-left:1px solid #ddd;background:#fff;}

.table ul {margin:0px;padding:0px;float:left;list-style-type:none;}

.table li {width:159px;height:30px;float:left;color:#3e3e3e;text-indent:10px;text-align:left;line-height:30px;font-family:Verdana,"微軟雅黑"; border-right:1px solid #ddd;border-bottom:1px solid #ddd;}

.table li.td {color:#fff;font-size:14px;font-family:"微軟雅黑";font-weight:bold;background:#424242;}

.table li.tit {width:479px;}

.table .tr {width:800px;height:30px;float:left;text-indent:10px;text-align:left;line-height:30px;font-size:14px;font-family:Verdana;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}

.table .tr a {color:#ff6600;text-decoration:none;}

.table .tr a:hover {text-decoration:underline;}

</style>

function $(id){

return typeof id === "string" ? document.getElementById(id) : id;

}

function $$(oParent, elem){

return (oParent || document).getElementsByTagName(elem);

function $$$(oParent, sClass){

var aElem = $$(oParent, '*');

var aClass = [];

var i = 0;

for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);

return aClass;

function Alert(){

this.initialize.apply(this, arguments);

Object.extend = function(destination, source){

for (var property in source) {

destination[property] = source[property];

}

return destination;

};

Alert.prototype = {

initialize : function(obj, frame, onEnd){

if($(obj)){

var _this = this;

this.obj = $(obj);

this.frame = frame;

this.oEve(onEnd);

this.oTitle = this.onEnd.title;

this.oContent = this.onEnd.content;

this.iWidth = this.onEnd.width;

this.iHeight = this.onEnd.height;

this.iTop = this.onEnd.top;

this.iLeft = this.onEnd.left;

this.iFixed = this.onEnd.fixed;

this.iClose = this.onEnd.close;

this.obj.onclick = function(){_this.create(),_this.backg();};

window.onresize = function(){_this.backg();};

}

create : function(){

this.oDiv = document.createElement('div');

this.oAlert_backg = document.createElement('div');

this.oAlert_frame = document.createElement('div');

this.oTop_l = document.createElement('div');

this.oTop_c = document.createElement('div');

this.oTop_r = document.createElement('div');

this.oCon = document.createElement('div');

this.oCon_l = document.createElement('div');

this.oCon_c = document.createElement('div');

this.oCon_r = document.createElement('div');

this.oBot_l = document.createElement('div');

this.oBot_c = document.createElement('div');

this.oBot_r = document.createElement('div');

this.oDiv.id = this.frame;

this.oAlert_backg.className = 'alert_backg';

this.oAlert_frame.className = 'alert_frame';

this.oTop_l.className = 'top_l';

this.oTop_c.className = 'top_c';

this.oTop_r.className = 'top_r';

this.oCon.className = 'con';

this.oCon_l.className = 'con_l';

this.oCon_c.className = 'con_c';

this.oCon_r.className = 'con_r';

this.oBot_l.className = 'bot_l';

this.oBot_c.className = 'bot_c';

this.oBot_r.className = 'bot_r';

document.body.appendChild(this.oDiv);

this.box = $(this.frame);

this.box.appendChild(this.oAlert_backg);

this.box.appendChild(this.oAlert_frame);

this.oFra = $$$(this.box, 'alert_frame')[0];

this.oFra.appendChild(this.oTop_l);

this.oFra.appendChild(this.oTop_c);

this.oFra.appendChild(this.oTop_r);

this.oFra.appendChild(this.oCon);

this.oFra.appendChild(this.oBot_l);

this.oFra.appendChild(this.oBot_c);

this.oFra.appendChild(this.oBot_r);

this.oCone = $$$(this.box, 'con')[0];

this.oCone.appendChild(this.oCon_l);

this.oCone.appendChild(this.oCon_c);

this.oCone.appendChild(this.oCon_r);

this.tit = $(this.frame);

this.con = $$$(this.tit, 'con_c')[0];

this.oAlert_tit = document.createElement('div');

this.oAlert_con = document.createElement('div');

this.oH2 = document.createElement('h2');

this.oAlert_tit.className = 'alert_tit';

this.oAlert_con.className = 'alert_con';

if(this.oTitle != ""){

this.con.appendChild(this.oAlert_tit);

this.con.appendChild(this.oAlert_con);

this.oAlert_tit = $$$(this.tit, 'alert_tit')[0];

this.oH2.innerHTML = this.oTitle;

this.oAlert_tit.appendChild(this.oH2);

this.content();

this.width();

this.height();

this.top();

this.left();

this.fixed();

this.close();

this.Top = this.oFra.offsetTop;

this.oFra.style.top = (this.Top - 40) +'px';

this.oFra.style.marginTop = 0;

this.sMove(this.oFra, {top:this.Top, opacity:100});

this.sMove(this.oBackg, {opacity:50});

oEve: function(onEnd){

this.onEnd = {};

Object.extend(this.onEnd, onEnd || {});

content : function(){

this.conent = $$$(this.tit, 'alert_con')[0];

this.conent == undefined ? this.con.innerHTML = this.oContent : this.conent.innerHTML = this.oContent;

this.oButton = $$(this.tit, 'button');

var i = 0;

var _this = this;

for(i=0;i<this.oButton.length;i++)this.oButton[i].onclick = function(){_this.em.onclick()};

width : function(){

this.oBackg = $$$(this.tit, 'alert_backg')[0];

this.oFrame = $$$(this.tit, 'alert_frame')[0];

this.oCon = $$$(this.oFrame, 'con')[0];

this.oTop_c = $$$(this.oFrame, 'top_c')[0];

this.oCon_c = $$$(this.oFrame, 'con_c')[0];

this.oBot_c = $$$(this.oFrame, 'bot_c')[0];

this.oAlert_tit = $$$(this.oFrame, 'alert_tit')[0];

this.oAlert_con = $$$(this.oFrame, 'alert_con')[0];

if(this.iWidth != ""){

this.oFrame.style.width = parseInt(this.iWidth) +'px';

this.oFrame.style.marginLeft = -parseInt(this.iWidth) / 2 +'px';

this.oTop_c.style.width = parseInt(this.iWidth) - 10 +'px';

this.oCon_c.style.width = parseInt(this.iWidth) - 10 +'px';

this.oBot_c.style.width = parseInt(this.iWidth) - 10 +'px';

this.oAlert_tit.style.width = parseInt(this.iWidth) - 12 +'px';

this.oAlert_con.style.width = parseInt(this.iWidth) - 10 +'px';

height : function(){

if(this.iHeight != ""){

this.oFrame.style.height = parseInt(this.iHeight) +'px';

this.oFrame.style.marginTop = -parseInt(this.iHeight) / 2 +'px';

this.oCon.style.height = parseInt(this.iHeight) - 10 +'px';

this.oAlert_con.style.height = parseInt(this.iHeight) - 40 +'px';

top : function(){

if(this.iTop != "")this.oFrame.style.top = parseInt(this.iTop) +'px',this.oFrame.style.marginTop = 0;

left : function(){

if(this.iLeft != "")this.oFrame.style.left = parseInt(this.iLeft) +'px',this.oFrame.style.marginLeft = 0;

backg : function(){

this.oScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

this.oScrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;

this.oBackg.style.width = document.documentElement.clientWidth + (this.oScrollWidth - document.documentElement.clientWidth) +'px'

this.oBackg.style.height = document.documentElement.clientHeight + (this.oScrollHeight - document.documentElement.clientHeight) +'px'

fixed : function(){

if(this.iFixed == "fixed"){

this.oFrame.style.position = 'fixed';

this.oAlert_tit.style.cursor = 'move';

this.oAlert_tit.onmousedown = function(e){

var _thisE = this;

this.oEvent = e || event;

this.X = this.oEvent.clientX - _this.oFrame.offsetLeft;

this.Y = this.oEvent.clientY - _this.oFrame.offsetTop;

document.onmousemove = function(e){

this.oEvent = e || event;

this.L = this.oEvent.clientX - _thisE.X;

this.T = this.oEvent.clientY - _thisE.Y;

if(this.L < 0){

this.L = 0;

}else if(this.L > document.documentElement.clientWidth - _this.oFrame.offsetWidth){

this.L = document.documentElement.clientWidth - _this.oFrame.offsetWidth

}

if(this.T < 0){

this.T = 0;

}else if(this.T > document.documentElement.clientHeight - _this.oFrame.offsetHeight){

this.T = document.documentElement.clientHeight - _this.oFrame.offsetHeight;

_this.oFrame.style.left = this.L + 'px';

_this.oFrame.style.top = this.T + 'px';

_this.oFrame.style.margin = 0;

return false;

}

document.onmouseup = function(){

document.onmouseup = null;

document.onmousemove = null;

};

return false;

};

if(this.oFrame){

if(!-[1,] && !window.XMLHttpRequest){

document.documentElement.style.textOverflow = "ellipsis";

this.oFrame.style.position = "absolute";

this.oFrame.style.setExpression("top", "eval(documentElement.scrollTop + " + this.oFrame.offsetTop + ') + "px"');

}

close : function(){

if(this.iClose == "close" && this.oTitle != ""){

this.clos = $$$(this.tit, 'alert_tit')[0];

var oEm = document.createElement('em');

this.clos.appendChild(oEm);

this.em = $$(this.tit, 'em')[0];

this.em.onmouseover = function(){_this.em.className = 'hove';};

this.em.onmouseout = function(){_this.em.className = '';};

this.em.onclick = function(){

_this.sMove(_this.oFra, {top:(_this.Top - 40), opacity:0},function(){

document.body.removeChild(_this.em.parentNode.parentNode.parentNode.parentNode.parentNode);

});

_this.sMove(_this.oBackg, {opacity:0});

getStyle : function(obj, attr)

{

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];

sMove : function(obj, json, onEnd){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

_this.dMove(obj, json, onEnd);

},30);

dMove : function(obj, json, onEnd){

this.attr = '';

this.bStop = true;

for(this.attr in json){

this.iCur = 0;

this.attr == 'opacity' ? this.iCur = parseInt(parseFloat(this.getStyle(obj, this.attr))*100) : this.iCur = parseInt(this.getStyle(obj, this.attr));

this.iSpeed = (json[this.attr] - this.iCur) / 7;

this.iSpeed = this.iSpeed > 0 ? Math.ceil(this.iSpeed) : Math.floor(this.iSpeed);

if(json[this.attr] != this.iCur)this.bStop = false;

if(this.attr == 'opacity'){

obj.style.filter = 'alpha(opacity:' + (this.iCur + this.iSpeed) +')';

obj.style.opacity = (this.iCur + this.iSpeed ) / 100;

}else{

obj.style[this.attr] = this.iCur + this.iSpeed + 'px';

if(this.bStop){

clearInterval(obj.timer);

if(onEnd)onEnd();

}

window.onload = function(){

new Alert('but', 'box', {

title : '提示内容',

content : '<div class="size">确定不在關注新浪微網誌？</div><div class="but"><button class="button">确定</button><button class="button">取消</button></div>',

width : '',

height : '',

top : '',

left : '',

fixed : '',

close : 'close'

});

</script>

</head>

<ul>

<li>ButId</li>

<li class="tit">點選按鈕Id（必選）</li>

<li>ElementId</li>

<li class="tit">彈出層Id（必選）</li>

<li>title</li>

<li class="tit">提示層标題（可選）</li>

<li>content</li>

<li class="tit">提示層内容（可選）</li>

<li>width</li>

<li class="tit">提示層寬度（可選）</li>

<li>height</li>

<li class="tit">提示層高度（可選）</li>

<li class="tit">提示層上間距（可選）</li>

<li>fixed</li>

<li class="tit">跟誰滾動條絕對定位/是否拖拽（fixed:'fixed'）（可選）</li>

<li>close</li>

<li class="tit">是否顯示關閉按鈕（close:'close'）（可選）</li>

</ul>

<div class="tr"><a href="javascript:;" id="but">Examples</a></div>

</div>

</body>

</html>

Js彈出層，彈出框代碼

繼續閱讀

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題