在h5移動端專案開發過程，肯定會遇到不少與客戶打交道的彈出框。
當然基於h5+ api中有提供系統的彈出對話方塊，雖然能夠達到效果，但是實際的美觀是幾乎不存在的。
應專案需要，草草的寫了乙個彈出框的效果。
作為程式猿**是最敏感的，廢話也少說了，直接看下面的**：
css**部分：
#lee-mask#lee-content-wrap
#lee-content
/*title
*/#lee-content .title
/*content
*/#lee-content .content-wrap
/*footer
*/#lee-content .footer
#lee-content .footer .btn-group
#lee-content .footer .btn-group .button-one,
#lee-content .footer .btn-group .button-two,
#lee-content .footer .btn-group .button-block
#lee-content .footer .btn-group .button-one
#lee-content .footer .btn-group .button-two
#lee-content .footer .btn-group .button-block
/*input樣式框
*/#lee-content .popup-input-wrap
#lee-content .popup-input-wrap .input-withdraw
#lee-content .input-extras
.fadein
@keyframes fadein
100%
}@-webkit-keyframes fadein
100%
}.mask-fadein
@keyframes mask-fadein
100%
}@-webkit-keyframes mask-fadein
100%
}.fadeout
@keyframes fadeout
100%
}@-webkit-keyframes fadeout
100%
}.mask-fadeout
@keyframes mask-fadeout
100%
}@-webkit-keyframes mask-fadeout
100%
}
js**部分：
(function(global, factory) )(window, function(
global
) , main: ,
buttons: [,
touchstart: function() ,
touchend: function()
}, ,
touchstart: function() ,
touchend: function()
}]};
function popup(options) else
}popup.prototype =,
//給mask新增點選隱藏事件函式
maskevent : function())
} else
},//渲染屬性值
renderattr: function() );
util.rendercss(
this.content, );
//title內容顯示
if (this.args["
title
"]["
height
"] == 0
) else
); }
//內容區顯示部分
wrap.innerhtml = this.args["
main
"]["
content
"]; //
可以是html**嵌入
util.rendercss(wrap, )
//buttons
if (this.args.buttons.length == 1
) else
if (this.args.buttons.length == 2
)
var button = this.buttons = group.queryselectorall("
.button");
for (var i = 0; i < button.length; i++) );
var obj =_this.args.buttons[i];
if (_this.args.buttons[i]["
click
"]) ,
false
); }
else
if (_this.args.buttons[i]["
touchstart
"]) ,
false
); }
else
if (_this.args.buttons[i]["
touchend
"]) ,
false
); }
})(i)}},
show: function() )
},hide: function(mask, content) )
},active: function(node) ,
//處理節點
deletenode : function()
};var util =
else
if(array.isarray(newopt[name]))
else
if(newopt[name].length == 1
) else
if (oldopt[name].length == 1 && newopt[name].length == 2
) , touchstart: function() ,
touchend: function()
}var tempobj =arguments.callee(demo, temp)
oldopt[name].push(tempobj)}}
}}
else
} else
if(typeof oldopt[name] == "
boolean")
}return
oldopt;
},//渲染css工具函式
rendercss: function(obj, options)
},//深拷貝複製
simplydeepcopy : function(obj)
};//閉包中暴露出該函式
global.popup =popup;
});
使用的方法：
var options =,main : ,
buttons : [,
tap : function(),
touchstart : function(),
touchend : function()
},,touchstart : function(),
touchend : function()}]}
document.getelementbyid(
"id1
").addeventlistener("
tap"
, function()
options.buttons[1]["name"] = "按鈕2";options.buttons[1].click = function()
var pop = new
popup(options)
pop.show(); // 彈出框按照需要手動設定顯示
})document.getelementbyid(
"id2
").addeventlistener("
tap"
, function()
options.buttons[1]["name"] = "按鈕2";options.buttons[1].click = function()
var pop1 = new
popup(options)
pop1.show();
})
內容區可以自定義一些html**加上相關的css樣式即可，菜鳥初次寫外掛程式，望大神指點。
ps: 此外掛程式存在各種bug，各種問題，請謹慎使用。
alert confirm彈出框外掛程式
某個沒用過的但是很簡潔的彈出框外掛程式 一 自己建立js檔案並貼上進去 function html 復原不在 init 裡面做了，重複呼叫時會有問題，直接在 alert confirm 裡面做 var alert function options var confirm function optio...
jquery彈出框外掛程式
1.jquery.ui.dialog 官方位址 jquery.ui.dialog是乙個非常靈活的模式框,它的官方位址為 api 2.檔案引用 要使用jquery.ui.dialog,需要引用兩個檔案，1個是js，另外1個是css 在contentpage中新增 在masterpage中新增 3.使用...
彈出框外掛程式 dialog
基於jquery和dot.js彈出框外掛程式，相容ie6 等其他瀏覽器。思想 彈出框元素插入body節點中，並在頁面垂直居中顯示 fixed定位 觸發確定和關閉事件繫結。注意ie6包含兩個問題 一 select flash不能遮罩，採用iframe。二 fixed屬性採用滾動時重新計算高度或在樣式中...