10种展示效果的弹出层对话框插件method.js

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

<link type="text/css" rel="stylesheet" href="css/layer-animate.css"/>
<style>
*{
  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;
}
</style>

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

<div class="btn btn1">从上滑落</div>
<div class="btn btn2">从下划入</div>
<div class="btn btn3">中间扩散</div>
<div class="btn btn4">中间扩散渐入</div>
<div class="btn btn5">从下方平滑进入</div>
<div class="btn btn6">翻转</div>
<div class="btn btn7">晃动</div>
<div class="btn btn8">左右伸缩</div>
<div class="btn btn9">透明度渐入</div>
<div class="btn btn10">无动效弹框</div>

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

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/method.js"></script>
<script type="text/javascript">
//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:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
        //值为0的时候，则表示不显示该按钮。否则显示该按钮
        btn:["取消","保存"]
    };
    method.msg_layer(obj);
});
$(".btn2").on("click",function(){
   var obj={
       type:"slideFromBottom",
       //有title属性的话，则有标题，标题内容为title值，无title属性则无标题
       title:"弹框标题",
       content:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
       area:["500px","200px"],
       btn:[0,"保存"]
   };
   method.msg_layer(obj);
});
$(".btn3").on("click",function(){
   var obj={
       type:"showSweetAlert",
       title:"弹框标题",
       content:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
       area:["500px","auto"],
       btn:["取消","提交"]
   };
   method.msg_layer(obj);
});
$(".btn4").on("click",function(){
   var obj={
       type:"layerFadeIn",
       title:"弹框标题",
       close:"true",
       content:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
       area:["auto","200px"],
        btn:["取消",0]
   };
   method.msg_layer(obj);
});
$(".btn5").on("click",function(){
   var obj={
       type:"layer-fadeInUpBig",
       title:"弹框标题",
       content:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
       area:["500px","200px"]
   };
   method.msg_layer(obj);
});
$(".btn6").on("click",function(){
   var obj={
       type:"layer-rollIn",
       title:"弹框标题",
       content:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
       area:["500px","200px"]
   };
   method.msg_layer(obj);
});
$(".btn7").on("click",function(){
   var obj={
       type:"layer-shake",
       title:"弹框标题",
       content:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
       area:["500px","200px"]
   };
   method.msg_layer(obj);
});
$(".btn8").on("click",function(){
   var obj={
       type:"layer-spread",
       title:"弹框标题",
       content:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
       area:["300px","200px"]
   };
   method.msg_layer(obj);
});
$(".btn9").on("click",function(){
   var obj={
       type:"layer-fadeIn",
       title:"弹框标题",
       content:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
   };
   method.msg_layer(obj);
});
$(".btn10").on("click",function(){
   var obj={
       type:"none",
       title:"弹框标题",
       content:"<div>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”",
       area:["500px","200px"]
   };
   method.msg_layer(obj);
});
$("body").delegate(".msg-layer-bg","click",function(){
    method.msg_close()
});
</script>