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

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

查看演示

下载资源：

次下载资源

下载积分：

积分

页面的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()

});

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

一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
实现对gridview删除行时弹出确认对话框的四种方法
实现对gridview删除行时弹出确认对话框的四种方法在.net2.0中,实现对gridview删除行时弹出确认对话框的四种方法 1,GridView中如何使用CommandField删除时,弹出确 ...
10种K线组合给出买进信号
底部出现跳空或中长阳,强势买进,一拨升势将起. 出现在底部或调整末期,方向向上,可放心买进.如处在高位,要观察成交量,若放量可以买进,若缩量则观望为宜. 股票相关文章推荐:★ ※转型个股赚钱机会最大- ...
html另存为对话框,前端实现弹出“另存为”对话框的三种方式
今天开发一个需求,需要将一段字符串保存到文件中,并且保存之后在页面上弹出"另存为"对话框来实现将文件保存到指定位置.那么应该如何来实现在前端弹出"另存为"对话框 ...
Android之AlertDialog(弹出式对话框)的使用
一.简单的内容文本弹出式对话框还是一样MainActivity的布局文件就不放上了,就是一个简单的Button控件,在Java代码中为其绑定了一个监听器. 首先我们需要创建这个AlertDialog ...
html关闭页面弹出再见信息提示框,js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框//====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 functi ...
Js实现点击超链接弹出层，效果仿Discuz登录！
主要应用到的是dispaly:none 和 dispaly:block;来控制实现的: <a id="link" href="#" onclick=&qu ...
AlertBox 弹出层（信息提示框）效果
弹出层(弹窗)就是相对文档或窗口定位的一个层,一般用来显示提示信息.广告等内容,还可以配合覆盖层来锁定页面. 在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖 ...
5弹出阴影遮罩_千文详述Cocos Creator弹出式对话框实现技术，着实硬核
正文在Cocos Creator游戏开发中,经常需要使用到弹出式对话框,下面我们就一起来封装下自己的弹出式对话框. 一.弹出式对话框原理解析 1:对话框的结构: 1. `根节点 -->`2. ...

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

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

最新文章

热门文章