showDialog3.0说明

1、引入脚本

2、弹出内容

弹层内容需要放在：

<div class="tg__show__dialog" id="dialog--box"> <div class="dialog__content">  </div> </div>

3、关闭按钮

> <button data-show__dialog-close>关闭</button>

快速上手

(function(){ //声明需要弹出的内容 let firstBlood = document.querySelector('#dialog--box'); //实例一个方法 let showDialog = new DialogShow(firstBlood); //找个按钮启动方法 let btnShowDialog = document.querySelector('#dialog--button'); //绑定方法 btnShowDialog.addEventListener('click',showDialog.toggle.bind(showDialog)); //收功 })();

自定义 - 所有选项

constructor(el,options){ //code } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////参数 el, //弹出的dom对象； option:{ overlayColor : 'rgba(0, 0, 0, 0.6);', //遮罩颜色，和透明度，使用rgba格式(红，绿，蓝，透明度0~1)，即rgba(red,green,blue,alpha), effectType : '0', // 弹出CSS3的动画类型，目前有 0 ~ 5种； onOpenDialog: function(){return false;}, // 弹出时候callback onCloseDialog: function(){return false;} // 关闭时候callback } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////例子 const openFn = () =>{ document.title = 'opening'; } const closeFn = () =>{ document.title = 'closed'; } let dialogModule = document.querySelector('#dialog--box'); let _dialog = new DialogShow( dialogModule, { overlayColor:'rgba(140, 48, 63, 0.6)', effectType:'3', onOpenDialog: openFn, onCloseDialog: closeFn }); document.querySelector('#aBtn').addEventListener('click',_dialog.toggle.bind(_dialog));

其它

//如何像之前一样定义一个方法？ TGDialogS = (function(){ let dialogModule = document.querySelector('#cbox'); let _dialog = new DialogShow( dialogModule, { overlayColor:'rgba(140, 48, 63, 0.6)', effectType:'0', }); document.querySelector('#cbtn').addEventListener('click',_dialog.toggle.bind(_dialog)); return{ dialog:function(){ _dialog.toggle.bind(_dialog)(); } } })(); //////////////////////////////////////////////////////////////////// 很长的弹出层？ ... effectType:'5' ... 随屏幕滚动的弹出层？ ... effectType:'5' ...

一个实践

一个列表，点击弹出不同内容

//按钮列表 <button class="btn" data-video='k0975i9q2zd'>枯藤</button> <button class="btn" data-video='r0972qti7rn'>老树</button> <button class="btn" data-video='r0972wzu6o5'>昏鸦</button> <button class="btn" data-video='b0972kca08m'>小桥</button> <button class="btn" data-video='g09721o4p6i'>流水</button> <script> //弄个通用方法PlayVideoDialog.show(); PlayVideoDialog = (function(){ //播放视频 function Play(v){ let player = new Txplayer({containerId: 'videowap',vid:v,width: '1070',height: '600',autoplay: true}); } //弹出层关闭，清空播放器； function Clear(){document.querySelector('#videowap').innerHTML=''} //弹出层id； let dialogModule = document.querySelector('#vbox'); //实例一个弹出层，列表里面全部使用这个方法，但这里并没有定义onOpenDialog，因为需要在绑定事件的方法里面获取data-video里面的视频id； let _dialog = new DialogShow(dialogModule,{effectType:'4',onCloseDialog:Clear}); return{ //弹出方法； show:function(v){ //单独定义每个弹出行为里面的视频播放，同理，_dialog.options里面的参数都可以定义{overlayColor,effectType,onOpenDialog,onCloseDialog} _dialog.options.onOpenDialog = function(){Play(v)}; //弹出方法 _dialog.toggle.bind(_dialog)(); } } })(); (function(){ //视频播放按钮列表 let videoLists = document.querySelectorAll('[data-video]'); //为每个按钮绑定一个点击事件； videoLists.forEach(function(item){ let self = item; item.addEventListener('click',function(){ PlayVideoDialog.show(self.dataset.video) }) }); //搞定 })(); </script>

其它

自定义动画，交互等，可以支持svg动画，canvas背景，此为后话

showDialog3使用说明