建立網頁對話視窗的套件 SimpleModal 基於 MooTools 框架
 |
| SimpleModal 對話視窗方塊 - MooTools |
使用方法：
第一步 載入程式所需用到的檔案
//重新設定瀏覽器邊界
<link rel="stylesheet" href="assets/css/reset.css" type="text/css" media="screen" charset="utf-8">
//SimpleModal 的CSS 樣式設計
<link rel="stylesheet" href="/css/simplemodal.css" type="text/css" media="screen" charset="utf-8">
//MooTools 框架
<script src="assets/javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
//SimpleModal 的主程式碼
<script src="../Source/simple-modal.js" type="text/javascript" charset="utf-8"></script>
第二步 寫入彈出式對話視窗的HTML元素操作連結
<div class="wrapper">
<ul>
<li class="example-item" id="alert">
<img src="assets/images/example-1.jpg" width="196" height="147" alt="Example 1">
<a href="javascript;">Alert</a>
</li>
<li class="example-item" id="confirm">
<img src="assets/images/example-2.jpg" width="196" height="147" alt="Example 2">
<a href="#">Confirm</a>
</li>
<li class="example-item" id="modal">
<img src="assets/images/example-3.jpg" width="196" height="147" alt="Example 3">
<a href="#">Modal</a>
</li>
<li class="example-item" id="modal-ajax">
<img src="assets/images/example-4.jpg" width="196" height="147" alt="Example 4">
<a href="#">Modal Ajax</a>
</li>
<li class="example-item" id="modal-image">
<img src="assets/images/example-5.jpg" width="196" height="147" alt="Example 5">
<a href="#">Modal Image</a>
</li>
<li class="example-item" id="alert-noheader">
<img src="assets/images/example-6.jpg" width="196" height="147" alt="Example 6">
<a href="#">No header</a>
</li>
<li class="example-item" id="modal-nofooter">
<img src="assets/images/example-7.jpg" width="196" height="147" alt="Example 7">
<a href="#">Video embed</a>
</li>
<li class="example-item" id="example-eheh">
<img src="assets/images/example-8.jpg" width="196" height="147" alt="?">
<a href="#">?</a>
</li>
</ul>
<div class="clear"></div>
</div>
第三步 寫入 CSS 設計樣式
body{
font-family: 'Helvetica', Arial, serif;
font-size: 12px;
padding-bottom:20px;
}
a{
color:#666;
text-decoration:none;
}
.header {
position: relative;
background: #dce0ed;
display: block;
height: 220px;
text-align: center;
}
.header .window {
position: relative;
display: block;
width: 125px;
height: 131px;
padding:32px 0 0;
margin:0 auto;
background: transparent url("../images/simpleModalSmallWhite.png") no-repeat center center;
}
.wrapper{
display:block;
width:960px;
margin:0 auto;
}
.simple-modal-title{
position: relative;
display: block;
width: 200px;
height: 35px;
padding:4px 0 0;
margin:0 auto;
background: transparent url("../images/demo.png") no-repeat center center;
}
.example-item {
position: relative;
background: #FFFFFF;
float:left;
margin:20px 10px 0 10px;
width: 218px;
height: 198px;
border: 1px solid #d9cfd8;
text-align: center;
cursor: pointer;
}
.example-item img {
margin: 11px;
border: 1px solid #dce0ed;
width: 196px;
height: 147px;
line-height: 147px;
cursor: pointer;
}
.example-item a,
.example-item a:link,
.example-item a:visited,
.example-item a:active {
width: 218px;
bottom: 10px;
font-family: 'Helvetica', Arial, serif;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #8188a0;
}
.example-item a:hover {
color: #444;
}
p.credits{
display:block;
padding:20px 0 10px 0;
text-align:center;
font-size:11px;
color:#AAA;
}
.clear{
clear:both;
}
.align-left{
text-align:left !important;
}
.align-right{
text-align:right !important;
}
第四步 寫入 JavaScript 程式片段
window.addEvent("domready", function(e){
/* Alert */
$("alert").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal({"btn_ok":"Alert button"});
SM.show({
"title":"Alert Modal Title",
"contents":"Lorem ipsum dolor sit amet..."
});
})
/* Confirm */
$("confirm").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal({"btn_ok":"Confirm button"});
SM.show({
"model":"confirm",
"callback": function(){
alert("Action confirm!");
},
"title":"Confirm Modal Title",
"contents":"Lorem ipsum dolor sit amet..."
});
})
/* Modal */
$("modal").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal({"btn_ok":"Confirm button"});
// Aggiunge Bottone Conferma
SM.addButton("Confirm", "btn primary", function(){
alert("Action confirm modal");
this.hide();
});
// Aggiunge Bottone annulla
SM.addButton("Cancel", "btn");
SM.show({
"model":"modal",
"title":"Modal Window Title",
"contents":"<p ><img style='text-align:center' src='assets/images/simpleModalSmallWhite.png' />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
});
})
/* Modal Ajax */
$("modal-ajax").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal({"btn_ok":"Confirm button", "width":600});
// Aggiunge Bottone Conferma
SM.addButton("Confirm", "btn primary", function(){
// Check
if( $("confirm-text").get("value") != "DELETE" ){
$("confirm-delete-error").setStyle("display", "block");
}else{
// Your code ...
this.hide();
}
});
// Aggiunge Bottone annulla
SM.addButton("Calcel", "btn");
SM.show({
"model":"modal-ajax",
"title":"Are you sure you want to delete this?",
"param":{
"url":"ajax-content.html",
"onRequestComplete": function(){ }
}
});
})
/* Modal Image */
$("modal-image").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal({
"onAppend":function(){
$("simple-modal").fade("hide").fade("in")
}
});
SM.show({
"model":"modal-ajax",
"title":"Modal Lightbox",
"param":{
"url":"assets/images/lightbox.jpg",
"onRequestComplete": function(){ }
}
});
})
/* NO Header */
$("alert-noheader").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal({"hideHeader":true, "closeButton":false, "btn_ok":"Close window", "width":600});
SM.show({
"model":"alert",
"contents":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
});
})
/* NO Footer */
$("modal-nofooter").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal({"hideFooter":true, "width":710});
SM.show({
"title":"Vimeo video",
"model":"modal",
"contents":'<iframe src="http://player.vimeo.com/video/26198635?title=0&byline=0&portrait=0&color=824571" width="680" height="382" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>'
});
})
$("example-eheh").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal(
{
"btn_ok":"Confirm button",
"overlayClick":false,
"width":300,
"onAppend":function(){
$("simple-modal").fade("hide");
setTimeout((function(){ $("simple-modal").fade("show")}), 200 );
var tw = new Fx.Tween($("simple-modal"),{
duration: 1600,
transition: 'bounce:out',
link: 'cancel',
property: 'top'
}).start(-400, 150)
var item = $("simple-modal").getElement(".simple-modal-footer a");
item.removeClass("primary").setStyles({"background":"#824571","color": "#FFF" });
item.getParent().addClass("align-left");
item.addEvent("mouseenter", function(){
var parent = this.getParent();
if( parent.hasClass("align-left") ){
parent.removeClass("align-left").addClass("align-right");
}else{
parent.removeClass("align-right").addClass("align-left");
}
})
}
});
// Aggiunge Bottone Conferma
SM.addButton("Click ME please!", "btn primary", function(){});
SM.show({
"model":"modal",
"title":"Eh eh eh",
"contents":"<p>Try clicking on the button \"Click ME please!\"</p>"
});
});
});
作者網站：http://simplemodal.plasm.it/
檔案大小：347 KB (包含範例)
檔案下載：https://github.com/plasm/simplemodal
檔案備份：下載
0 意見