MooTools库下的弹框插件Mbox
公用HTML代码段
<![CDATA[<div id="aTestBox" class="a_test_box dn">
俄罗斯媒体援引该国情报部门官员的话说，俄罗斯已派出专人，准备捉拿甚至追杀俄驻美国间谍机构的负责人。此人被曝为双重间谍，不但叛逃美国，还出卖了其在美国的10名同事，导致俄在美间谍网损失惨重。
</div>]]>
HTML:
<![CDATA[<button id="test1">测试，显示</button>]]>JS:
<![CDATA[$("test1").addEvent("click", function() {
Mbox.open({
url: "aTestBox",
openFrom: $("test1"),
useFx: true
});
});]]>
HTML:
<![CDATA[<button id="test2">加载外部图片</button>]]>JS:
<![CDATA[$("test2").addEvent("click", function() {
Mbox.open({
url: "//image.zhangxinxu.com/image/study/s/s512/mm1.jpg",
type: "image",
ajax: true,
title: "美女图片"
});
});]]>
(慎点，需刷新页面)
HTML:
<![CDATA[<button id="test3">加载中提示框</button>]]>JS:
<![CDATA[$("test3").addEvent("click", function() {
Mbox.loading();
});]]>
HTML:
<![CDATA[<button id="test4">提示，定时关闭</button>]]>JS:
<![CDATA[$("test4").addEvent("click", function() {
Mbox.remind("你的设置保存成功！", {
time: 2000
});
});]]>
HTML:
<![CDATA[<button id="test5">alert提示</button>]]>JS:
<![CDATA[$("test5").addEvent("click", function() {
Mbox.alert("你已经成功添加<a href='//www.zhangxinxu.com/'>小张</a>为好友");
});]]>
(回调含动画)
HTML:
<![CDATA[<button id="test6">确认提示框</button>]]>JS:
<![CDATA[$("test6").addEvent("click", function() {
Mbox.confirm("你确定删除此信息？", function() {
Mbox.alert("删除成功！", null, {
useFx: true,
height: 200 ,
width:400
});
});
});]]>
HTML:
<![CDATA[<button id="test7">url参数加载静态页</button>]]>JS:
<![CDATA[$("test7").addEvent("click", function() {
Mbox.open({
url: "loaded.html",
type: "ajax",
ajax: true
});
});]]>
assign方法绑定加载
HTML:
<![CDATA[<a id="test8" href="loaded.html">assign方法绑定加载</a>]]>JS:
<![CDATA[Mbox.assign($("test8"), {
type: "ajax",
ajax: true
});]]>
href加载页面元素
HTML:
<![CDATA[<a id="test9" href="#aTestBox">href加载页面元素</a>]]>JS:
<![CDATA[$("test9").addEvent("click", function() {
Mbox.open({}, this);
return false;
});]]>
(点击半透明背景可关闭)
HTML:
<![CDATA[<button id="test10">加载Flash</button>]]>JS:
<![CDATA[$("test10").addEvent("click", function() {
Mbox.open({
url: "//image.zhangxinxu.com/flash/blog/201006/ps-district.swf",
width: 550,
height: 200,
titleable:false,
closable: false,
overlayClosable: true,
opacity: 0.6,
type: "swf",
ajax: true
});
});]]>
HTML:
<![CDATA[<button id="test11">加载iFrame</button>]]>JS:
<![CDATA[$("test11").addEvent("click", function() {
Mbox.open({
title: '<a href="//t.sina.com.cn/">新浪微博</a> » <a href="//t.sina.com.cn/zhangxinxu">张鑫旭</a>',
url: "http://t.sina.com.cn/zhangxinxu",
width: 880,
height: 600,
type: "iframe",
ajax: true
});
});]]>
(点击弹框的"显示更多>>")
HTML:
<![CDATA[<button id="test12">高度动态改变</button>]]>JS:
<![CDATA[$("test12").addEvent("click", function() {
var nowHtml = '<div class="a_test_box">【高清组图：上海一栋28层公寓发生严重火灾】目前火势不断蔓延，外立面的防护网已经烧到了10层楼高。另据消息，上海警方已经调遣直升机赴现场。<div id="testMoreBox" class="dn">现场火势凶猛，浓烟滚滚。据附近居民介绍，胶州路718号胶州教师公寓内住着不少的退休教师</div><a id="testMore" href="javascript:;" rel="testMoreBox">显示更多>></a></div>';
Mbox.open({
url: nowHtml,
type: "string",
onShow: function() {
var self = this;
if ($("testMore")) {
$("testMore").addEvent("click", function() {
var rel = this.getProperty("rel");
if (rel && $(rel)) {
$(rel).setStyle("display", "block");
this.dispose();
self.reposition(true);
}
return false;
});
}
}
});
});]]>
HTML:
<![CDATA[<button id="test13">弹框关闭回调</button>]]>JS:
<![CDATA[$("test13").addEvent("click", function() {
Mbox.alert("此弹框关闭后页面背景色改变~~", null, {
onClose: function() {
document.body.setStyle("background-color", "#123456");
}
});
});]]>
HTML:
<![CDATA[<button id="test14">跟随页面滚动</button>]]>JS:
<![CDATA[$("test14").addEvent("click", function() {
Mbox.open({
url: '<div class="mbox_alert">弹框跟随滚动条滚动~~</div>',
reposition: false
});
});]]>
HTML:
<![CDATA[<button id="test15">定宽定高</button>]]>JS:
<![CDATA[$("test15").addEvent("click", function() {
Mbox.open({
url: '<div class="mbox_alert">宽高固定</div>',
width: 500,
height:300
});
});]]>
HTML:
<![CDATA[<button id="test16">加载图片失败</button>]]>JS:
<![CDATA[$("test16").addEvent("click", function() {
Mbox.open({
url: "http://www.baidu.com/image/mm1.jpg",
type: "image",
ajax: true
});
});]]>
HTML:
<![CDATA[<button id="test17">load HTML无效</button>]]>JS:
<![CDATA[$("test17").addEvent("click", function() {
Mbox.open({
url: "http://www.baidu.com/image/",
type: "ajax",
ajax: true
});
});]]>
俄罗斯媒体援引该国情报部门官员的话说，俄罗斯已派出专人，准备捉拿甚至追杀俄驻美国间谍机构的负责人。此人被曝为双重间谍，不但叛逃美国，还出卖了其在美国的10名同事，导致俄在美间谍网损失惨重。
