showDialog新组件-showDialog3
主要用来在PC端弹层，弹出内容，图片，视频等：
- 弹出动画可以多种选择；
- 遮罩透明度、颜色等可自定义；
- 支持弹出、关闭callback；
- 支持弹出超长（弹窗的高度大于视窗高度）的内容，组件会判断固定弹窗；
与旧的版本，这个组件有哪些改变：
- 新的版本，和旧的弹出层组件没有任何关联；
- 使用了比较激进的CSS3动画，弹出样式后续可以自定义
- 淘汰了一些旧的API（如resize，使用如ResizeObserver等接口开发
- 使用visible显示，不用display：none,默认ESC或点击背景关闭
- 在使用上更加简洁，使用data-绑定目标；
- 使用了比较激进的写法，所以该组件不支持IE 10以及以下的浏览器
- 其他代码上的适应时代的优化；
有考虑未来可能会加入的，随缘：
- 模块化支持；
- 用户自定义CSS3动画，如增加canvas背景、svg动画等；
- 弹出内容不用放既定容器等；
[warning] 注意
- 新旧版本不兼容；
showDialog3组件无须依赖
组件CDN
<script src="//game.gtimg.cn/images/js/showdialog3/index.js"></script>
弹出内容
<!--这个id:dialog--box 自定义，但必须存在；class = 'tg__show__dialog' 不能改动；不用设置display:none--->
<div class="tg__show__dialog" id="dialog--box">
<div class="dialog__content">
<!---弹出内容需要放在这里面,其中 class="tg__show__dialog" class="dialog__content" 不要改动，id自定义。--->
</div>
</div>
关闭按钮
<!---- data-show__dialog-close 这个是关键，可选，组件会自动绑定一个关闭弹窗的事件-->>
<button data-show__dialog-close>关闭</button>
上手实践
快速上手
<script>
(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));
//收功
})();
</script>
自定义 - 所有选项
<script>
constructor(el,options){
//code
}
</script>
////////////////////////////////////////////////////////////////////////////////////参数
<script>
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
}
</script>
//////////////////////////////////////////////////////////////////////////////////例子
<script>
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));
</script>
其它
<script>
//如何像之前一样定义一个方法？
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)();
}
}
})();
</script>
//////////////////////////////////////////////////////////////////////////////////
很长的弹出层？
...
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>