html5 提示框 是否 html对话框弹出效果

一款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()
});