伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI-弹出层,工具提示
 2329  14  查看评论 (8)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8
更新时间:2018/1/12 下午5:52:15
更新说明:修改removeClass函数
更新时间:2018/1/10 上午10:16:03更新说明:修改我的弹窗文档第六条到‘我的对话框’文档的链接错误

我的弹窗伟德BETVICTOR的使用方法

发布时间:2018-1-10 1:05

功能说明:

这个弹窗伟德BETVICTOR,主要实现的是弹窗的一些基本功能,如遮罩层:背景颜色、透明度、是否可以点击遮罩关闭弹窗;显示、关闭弹窗的按钮;弹窗显示、关闭的动画方式、动画时间;弹窗是否跟随页面滚动;弹窗在跟随页面滚动是出现的位置;一个弹窗中切换多种内容;支持手机模式;可以一个页面定义多个弹窗;ie8及以上支持(ie8目前不支持动画效果)。注:红色的类名my-popup、popup-content是必须有的,使用类名加自定义属性绑定显隐事件时,popup-show、popup-close与data-linked-id也是必须有的

最简单的使用方式

<div class="my-popup one-popup" id="onePopup">   <div class="popup-content">     <p class="msg">我是一个弹窗,点击透明遮罩层我就会隐藏</p>   </div> </div> **************************************** var oOnePopup = new MyPopup('onePopup');说明:该伟德BETVICTOR必须传的参数是id,它的默认配置是:固定定位、点击背景关闭、无动画、背景transparent、透明度0

弹窗的配置参数与方法

<div class="my-popup two-popup" id="twoPopup">   <div class="popup-content">     <p class="msg">我是弹窗2</p>     <div class="btn-box">       <button>我使用close()方法方式</button>       <button class="popup-close" data-linked-id="twoPopup">我使用类名加上data-lined-id属性方式</button>       </div>   </div> </div> ***************************************** var oTwoPopup = new MyPopup('twoPopup', {   param: {     isfixed: false, // 弹窗是否固定居中(默认true可以) 值:true、false     bgclose: false, // 可否通过点击背景关闭弹窗 (默认true可以) 值:true、false     type: 'top', // 弹窗出现的方式(默认none无动画) 值:none、opacity、top、right、bottom、left     time: 400, // 弹窗出现动画的时长(默认200ms)     bgcolor: '#777',// 背景颜色(默认transparent)     opacity: 0.2  // 背景透明度(默认0)   },   show: function () { console.log("这是显示弹窗前调用的函数");   },   close: function () { console.log("这是默认的关闭弹窗前调用的函数");   } });
配置参数
isfixed弹窗是否固定居中(默认true可以) 值:true、false
bgclose可否通过点击背景关闭弹窗 (默认true可以) 值:true、false
type弹窗出现的方式(默认none无动画) 值:none、opacity、top、right、bottom、left
time弹窗出现动画的时长(默认200ms)
bgcolor背景颜色(默认transparent)
opacity背景透明度(默认0)
showFn默认在弹窗弹出前执行的函数,如果是异步函数,有可能弹窗已经出现了,异步函数还没执行完。如果要使用异步函数,最好使用show()方法。这个在配置中的showFn方法,是显示弹窗时的默认方法,如果使用show()方法的时候传了函数进来,就不会执行该方法了,只会执行show()传入的方法。
closeFn默认在弹窗隐藏前执行的函数,如果是异步函数,有可能弹窗已经隐藏了,异步函数还没执行完。如果要使用异步函数,最好使用close()方法。close()传函数时同show()
方法
show()使用该方法,可以使处于隐藏状态的弹窗显示出来(在创建了对应的弹窗对象之后)
close()使用该方法,可以使处于显示状态的弹窗隐藏起来(在创建了对应的弹窗对象之后)
content()在一个弹窗中有多个popup-content时,该方法才有作用。该方法可以按传入的iNum显示对应的popup-content
show()方法参数
fn可选。函数,弹窗显示前需要执行的参数。
oPos可选。对象,在isfixed为false的情况下有效,即弹窗出现时相对于上于左的定位距离。有top,left两个属性
close()方法参数
fn可选。函数,弹窗隐藏前需要执行的参数。
content()方法参数
iNum必填。整数,0到n,传入同一个弹窗下的popup-content的下标。
随页面滚动的弹窗<div class="my-popup three-popup" id="threePopup">   <div class="popup-content">     <p class="msg">我是一个弹窗,点击透明遮罩层我就会隐藏</p>   </div> </div> ****************************************************** var oThreeShow = document.getElementById('threeShow'); var oThreePopup = new MyPopup('threePopup', {   param: {     isfixed: false,     bgcolor: '#917C77',     opacity: 0.2   } }); oThreeShow.onclick = function () { oThreePopup.show(null, {top: 200, left: 100}); }显示与关闭弹窗的两种方法<div class="my-popup four-popup" id="fourPopup">   <div class="popup-content">     <p class="msg">我是一个弹窗,点击透明遮罩层我就会隐藏</p>     <div class="btn-box">       <button class="popup-close" data-linked-id="fourPopup">关闭方法一</button>       <button id="fourClose">关闭方法二</button>     </div>   </div> </div> ***************************************************** var oFourShow = document.getElementById('fourShow'); var oFourClose = document.getElementById('fourClose'); var oFourPopup = new MyPopup('fourPopup', {   param: {     bgcolor: '#999',     opacity: 0.2   } }); oFourShow.onclick = function () {   oFourPopup.show(); } oFourClose.onclick = function () {   oFourPopup.close(); }方法一:使用指定的类名(popup-show、popup-close)及一个搭配的自定义属性(data-linked-id)实现弹窗的显隐。方法二:调用弹窗对象的show()、close()方法,实现对弹窗的显隐。如给一个按钮绑定点击事件,在点击事件中调用方法。一个弹窗中切换多种内容<div class="my-popup five-popup" id="fivePopup">   <div class="popup-content">     <p class="msg">one</p>     <button id="fiveOneBtn">下一步</button>   </div>   <div class="popup-content">     <p class="msg">two</p>     <button id="fiveTwoBtn">下一步</button>   </div>   <div class="popup-content">     <p class="msg">three</p>     <button id="fiveThreeBtn">完成</button>   </div> </div> ****************************************************************** var oFiveBtn1 = document.getElementById('fiveOneBtn'); var oFiveBtn2 = document.getElementById('fiveTwoBtn'); var oFiveBtn3 = document.getElementById('fiveThreeBtn'); var oFivePopup = new MyPopup('fivePopup', {   param: {     bgcolor: '#999',     opacity: 0.2,     time: 200,     type: 'opacity'   },   showFn: function () {     oFivePopup.content(0);   } }) oFiveBtn1.onclick = function () {   oFivePopup.content(1); } oFiveBtn2.onclick = function () {   oFivePopup.content(2); } oFiveBtn3.onclick = function () {   oFivePopup.close(); }说明:在有多个popup-content的时候可以通过MyPopup.content(iNum)方法来决定显示哪一个popup-content。iNum是从0开始的popup-content的顺序数。使用我的弹窗伟德BETVICTOR可以实现其它的自定义伟德BETVICTOR,如我的对话框伟德BETVICTOR我的对话框伟德BETVICTOR的使用方法功能说明:对话框伟德BETVICTOR基于弹窗伟德BETVICTOR,引入my_alert.js后会在window上绑定一个MyPopup构造函数的oMyAlert实例。该实例有五个方法show、close、chagneMsg、addClass、removeClass。对话框的显隐是使用的添加删除节点的方式,每一次的显示都是一个新的节点,在就节点没有被删除的情况下在调用show方法也不会创建另一个节点。只传文本,最简单的显示方式var oOneShow = document.getElementById('oneShow'); oOneShow.onclick = function () {   oMyAlert.show('我是谁?'); }说明:这一种最简单的显示方式,即不设置按钮,会在1.5秒之后自动关闭对话框。配置参数、方法var oTwoShow = document.getElementById('twoShow'); oTwoShow.onclick = function () {   var iNum = 0;   oMyAlert.show('我是谁?', {     bgclose: false,      // 是否可以点击背景关闭对话框(默认false不能)     bgcolor: '#999'      // 背景颜色(默认transparent)     opacity: 0.2,        // 背景透明度(默认0)     msgAlign: 'c',       // 消息文本的对齐方式:l -> 左对齐;c -> 居中对齐(默认);r -> 右对齐     btnAlign: 'c',       // 按钮的对齐方式:l -> 左对齐;c -> 居中对齐(默认);r -> 右对齐     aBtnTxt: ['确定', '取消', '关闭'],    // 按钮的个数及其文本(默认无按钮)     btn1: function () {  // btn1对应第一个按钮,btn+n对应第n个按钮的点击事件,如果不设置对应的事件,默认为调用close()关闭弹窗       if ( iNum == 0 ) {         oMyAlert.changeMsg('我是确定按钮,再点我就要消失了!');         iNum = 1;       } else {         oMyAlert.close();       }     },     btn2: function () {       iNum = 0;       oMyAlert.changeMsg('我是取消按钮,你点我呀!');     },     showFn: function () {       oMyAlert.addClass('state1');     }   }); }
配置参数
msg必须。show方法的第一个参数,是将要显示的对话框的文本
bgclose可选。true,false。是否可以点击背景关闭对话框(默认false不能)
bgcolor可选。背景颜色(默认transparent)
opacity可选。背景透明度(默认0)
msgAlign可选。消息文本的对齐方式:l -> 左对齐;c -> 居中对齐(默认);r -> 右对齐
btnAlign可选。按钮的对齐方式:l -> 左对齐;c -> 居中对齐(默认);r -> 右对齐
aBtnTxt可选。按钮的个数及其文本(默认无按钮)
btn+n可选。这个是按钮的方法,btn1就是aBtnTxt中第一个按钮的点击方法。如aBtnTxt中的按钮没有对应的btn方法,将默认为点击关闭对话框。
showFn可选。在弹窗显示之前执行的函数,注意是一个同步函数哈。
方法
show最重要的方法,调用该方法会添加并显示对话框
close关闭对话框
changeMsg调用该方法,将改变对话框中的文本
addClass调用该方法将给弹窗的popup-content添加类名
removeClass调用该方法将给弹窗的popup-content删除类名
可以根据自己的需求改变默认的弹窗样式,或者是设置多种样式然后在显示的时候决定用那种样式。// my_alert.css文件第一行,这是对话框默认样式 .my-alert .popup-content {   padding: 0;   background: #424F63;   color: #fff;   font-size: 14px; }// my_alert.css,要自定义弹窗样式可以在my_alert.css文件最下面这样写 .my-alert .state1 {   background: #71B69A;   border: 1px solid #3E7D6C;   border-radius: 10px;   box-shadow: 0 0 10px #aaa;   color: #fff; } .my-alert .state2 {   background: #EDEECF;   border: 2px solid #EDEECF;   border-radius: 4px;   box-shadow: 0 0 10px #aaa;   color: #7B2025; }<button id="threeShow1">默认样式</button> <button id="threeShow2">样式一</button> <button id="threeShow3">样式二</button> ******************************************************** var oThreeShow1 = document.getElementById('threeShow1'); var oThreeShow2 = document.getElementById('threeShow2'); var oThreeShow3 = document.getElementById('threeShow3'); oThreeShow1.onclick = function () {   oMyAlert.show('我是默认样式,我有按钮', {     bgcolor: '#999',     opacity: 0.2,     aBtnTxt: ['确定']   }) } oThreeShow2.onclick = function () {   oMyAlert.show('我是样式一,我没有按钮,我会在1.5秒后消失', {     bgcolor: '#ccc',     opacity: 0.4,     showFn: function () {       oMyAlert.addClass('state1');     }   }) } var i; var arr = ['改变1', '改变2'] oThreeShow3.onclick = function () {   i = 0;   oMyAlert.show('我是样式二,我有按钮,点击关闭我才会消失', {     bgcolor: 'green',     opacity: 0.2,     aBtnTxt: ['改变文本', '样式一', '关闭'],     btn1: function () {       oMyAlert.changeMsg(arr[i++]);       i = i >= arr.length ? 0 : i;     },     btn2: function () {       oMyAlert.removeClass('state2');       oMyAlert.addClass('state1');     },     showFn: function () {       oMyAlert.addClass('state2');     }   }) }
相关伟德BETVICTOR-弹出层,工具提示

jQuery多功能图片弹窗伟德BETVICTORpirobox

点击图片列表中的图片会放大,并可以随意切换
  弹出层
 11416  78

特别实用、调用简单的弹出层

特别实用、调用简单的弹出层。完全可以用样式控制,可以兼容的不同选择相应的效果
  弹出层
 16831  43

vue弹窗伟德BETVICTORvuemessage

一个基于vue的弹窗伟德BETVICTORvuemessage
  弹出层
 9456  30

jQuery遮罩弹窗居中

jQuery遮罩弹窗始终屏幕剧中,调用简单代码少。
  弹出层
 22766  151

讨论这个项目(8)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    &ybh 0
    2018/1/17 17:52:11
    具体是怎么使用的,可以加一个基本版的demo吗? 回复
    静心若水 0
    2018/1/11 22:04:36
    忆枫 0
    2018/1/11 12:41:26
    秦时明月? 0
    2018/1/11 9:26:24
    样式真的是丑到爆啊!!!
        静心若水0
        2018/1/11 9:42:01
        嗯,能推荐个好看点的弹出层吗,我学习一下。
        西瓜0
        2018/1/11 15:01:35
        看看这样弹出层样式吧,比你的要好看一点点http://www.jq22.com/jquery-info2933
    回复
    执手到白头*/ 0
    2018/1/10 10:45:22
    样式可以在难看一点吗?
        静心若水0
        2018/1/10 12:44:58
        这主要提供的是遮罩层的功能嘛,内容popup-content的样式一般都是自己弄的,毕竟需求很多时候都不一样。?
    回复
取消回复