封装弹窗方法可改样式使用

时间：2018-03-23 11:36:46 阅读：238 评论：0 收藏：0 [点我收藏+]

标签：oid over set option java nbsp mdr content typeof

<!DOCTYPE html>

<body style="background: #f5f5f5;">
<button>点击我</button>
<script type="text/javascript">
policy = {
alert: function(msg) {
YDialog.init({
content: msg,
style: ‘‘,
button: [‘确定‘],
type:0
});
}
}

$(‘button‘).on(‘click‘,function(){
policy.alert(‘hhhahah‘)
})
</script>
</body>

</html>

js文件：

(function($window,$document){

var $dialog = new Object();
var $class = ‘getElementsByClassName‘;
var $query = ‘querySelectorAll‘;
var $index = 0;
var $Class = [‘YDialog‘];
var $ = function(n){
return $document[$query](n);
};

$dialog.options = {
type : 0,
op : ‘‘,
cover : true,
coverClose : true,
fixed : true,
animate : true
};

$dialog.extend = function($object){
var $Object = JSON.parse(JSON.stringify(this.options));
for ( var i in $object ){
$Object[i] = $object[i];
}
return $Object;
};

$dialog.timer = {};

$dialog.end = {};

$dialog.touch = function($element,$function){
var $move;
if(!/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/.test(navigator.userAgent)){
return $element.addEventListener(‘click‘, function(e){
$function.call(this, e);
}, false);
}
$element.addEventListener(‘touchmove‘, function(){ $move = true; }, false);
$element.addEventListener(‘touchend‘, function(e){
e.preventDefault();
$move || $function.call(this, e);
$move = false;
}, false);
};

$dialog.init = function($options){
this.options = this.extend($options);
this.view();
};

$dialog.view = function(){
var $this = this;
var $options = $this.options;
var $container = $document.createElement(‘div‘);

$this.id = $container.id = $Class[0] + $index;
$container.setAttribute(‘class‘,$Class[0]+‘ ‘+$Class[0]+($this.options.type||0));
$container.setAttribute(‘index‘,$index);

$dialog.action = function($configs, $element){
var $this = this;

//自动关闭
if($configs.time){
$this.timer[$this.index] = setTimeout(function(){
YDialog.close($this.index);
}, $configs.time*1000);
}

//关闭按钮
if($configs.title){
var $close = $element[$class](‘button‘)[0];
var $function = function(){
$configs.cancel && $configs.cancel();
YDialog.close($this.index);
};
$this.touch($close, $function);
}

//确认取消
var $button = function(){
var $type = parseInt(this.getAttribute(‘type‘));
if($type == 0){
$configs.no && $configs.no();
YDialog.close($this.index);
} else {
$configs.yes ? $configs.yes($this.index) : YDialog.close($this.index);
}
if($configs.op == ‘login‘){ //登录
location.href = document.getElementById(‘j_url‘).value;
}else if($configs.op == ‘reply‘ && $type == 1){ //确认
help.ajax_dialog_reply(1);
}else if($configs.op == ‘reply‘ && $type == 0){ //取消
help.ajax_dialog_reply(0);
}else if($configs.op == ‘test‘){ //测评

}
};
if($configs.button){
var $buttons = $element[$class](‘button‘)[0].children;
var $length = $buttons.length;
for(var j = 0; j < $length; j++){
$this.touch($buttons[j], $button);
}
}
if($configs.op != ‘test‘){
//点遮罩关闭
if($configs.cover && $configs.coverClose){
var $cover = $element[$class](‘cover‘)[0];
$this.touch($cover, function(){
YDialog.close($this.index, $configs.end);
});
}
}

$configs.end && ($this.end[$this.index] = $configs.end);
};

$window.YDialog = {
version : ‘1.0‘,
index : 0,

//核心方法
init : function(options){
$dialog.init(options || {});
return $dialog.index;
},

close : function(index){
var dialog = $(‘#‘+$Class[0]+index)[0];
if(!dialog) return;
dialog.innerHTML = ‘‘;
$document.body.removeChild(dialog);
clearTimeout($dialog.timer[index]);
delete $dialog.timer[index];
typeof $dialog.end[index] === ‘function‘ && $dialog.end[index]();
delete $dialog.end[index];
},

remove : function(){
var $dialogs = $document[$class]($Class[0]);
for(var i = 0, len = $dialogs.length; i < len; i++){
YDialog.close(($dialogs[0].getAttribute(‘index‘)|0));
}
}

};

})(window,document);

//
typeof define === "function" ? define(function(){
return YDialog;
}) : function(){
var $scripts = document.scripts;
var $script = $scripts[$scripts.length - 1];
var $JSPath = $script.src;
var $XPath = $JSPath.substring(0, $JSPath.lastIndexOf("/") + 1);
$XPath = ‘https://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/js/vendor/dialog/‘;
if($script.getAttribute(‘merge‘)) return;
document.head.appendChild(function(){
var link = document.createElement(‘link‘);
link.href = $XPath + ‘css/style.css‘;
link.type = ‘text/css‘;
link.rel = ‘styleSheet‘
link.id = ‘CSSYDialog‘;
return link;
}());
}()

封装弹窗方法可改样式使用

标签：oid over set option java nbsp mdr content typeof

原文地址：https://www.cnblogs.com/xiaohuizhang/p/8628753.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行