html正方形对话框素材,10种展示效果的弹出层对话框插件method.js

一款10种展示效果的弹出层对话框插件method.js，可以点击演示页面的10个按钮分别查看不同的弹窗效果，基本上该有的弹窗特效都有了，喜欢的童鞋请收下吧。

查看演示

下载资源：

68

次 下载资源

下载积分：

30

积分

页面的head部分，需引入一个CSS样式并简单设置页面元素的样式，代码如下：

*{

margin:0;

padding: 0;

font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;

}

.btn{

float:left;

font-size: 18px;

margin:10px;

padding: 8px 12px;

cursor: pointer;

border: 1px solid #ddd;

border-radius: 3px;

}

页面的body部分，仅需设置10个弹窗样式的触发按钮即可，代码如下：

从上滑落

从下划入

中间扩散

中间扩散渐入

从下方平滑进入

翻转

晃动

左右伸缩

透明度渐入

无动效弹框

页面的底部，需引入jQuery库和method.js插件，并设置好不同弹窗的对应参数，代码如下：

//type值用来切换显示效果slideFromTop、slideFromBottom、showSweetAlert、none、layerFadeIn、layer-fadeInUpBig、layer-rollIn、layer-shake、layer-spread、layer-fadeIn

$(".btn1").on("click",function(){

var obj={

type:"slideFromTop",

//close属性为false为没有关闭按钮，close属性为true或无close属性则有关闭按钮

close:"false",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

//值为0的时候，则表示不显示该按钮。否则显示该按钮

btn:["取消","保存"]

};

method.msg_layer(obj);

});

$(".btn2").on("click",function(){

var obj={

type:"slideFromBottom",

//有title属性的话，则有标题，标题内容为title值，无title属性则无标题

title:"弹框标题",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

area:["500px","200px"],

btn:[0,"保存"]

};

method.msg_layer(obj);

});

$(".btn3").on("click",function(){

var obj={

type:"showSweetAlert",

title:"弹框标题",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

area:["500px","auto"],

btn:["取消","提交"]

};

method.msg_layer(obj);

});

$(".btn4").on("click",function(){

var obj={

type:"layerFadeIn",

title:"弹框标题",

close:"true",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

area:["auto","200px"],

btn:["取消",0]

};

method.msg_layer(obj);

});

$(".btn5").on("click",function(){

var obj={

type:"layer-fadeInUpBig",

title:"弹框标题",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

area:["500px","200px"]

};

method.msg_layer(obj);

});

$(".btn6").on("click",function(){

var obj={

type:"layer-rollIn",

title:"弹框标题",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

area:["500px","200px"]

};

method.msg_layer(obj);

});

$(".btn7").on("click",function(){

var obj={

type:"layer-shake",

title:"弹框标题",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

area:["500px","200px"]

};

method.msg_layer(obj);

});

$(".btn8").on("click",function(){

var obj={

type:"layer-spread",

title:"弹框标题",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

area:["300px","200px"]

};

method.msg_layer(obj);

});

$(".btn9").on("click",function(){

var obj={

type:"layer-fadeIn",

title:"弹框标题",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

};

method.msg_layer(obj);

});

$(".btn10").on("click",function(){

var obj={

type:"none",

title:"弹框标题",

content:"

大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",

area:["500px","200px"]

};

method.msg_layer(obj);

});

$("body").delegate(".msg-layer-bg","click",function(){

method.msg_close()

});