<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title></title>
<script src="http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/js/common/zepto.min.2.js"></script>
<script src="../../../static/js/Free_insurance/dialog_new.js"></script>
</head>
<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);
var $title = (function(){
var $type = typeof $this.options.title === 'object';
return $this.options.title ? '<h3 style="'+ ($type ? $this.options.title[1] : '') +'">'+ ($type ? $this.options.title[0] : $this.options.title) +'</h3><button class="close"></button>' : '';
}());
var $button = (function(){
var $buttons = ($this.options.button || []).length;
var $button;
var $buttonClass = ' S';
if( $buttons === 0 || !$this.options.button ){
return '';
}
$button = '<span type="1">'+ $this.options.button[0] +'</span>'
if( $buttons === 2 ){
$button = '<span type="0" class="L">'+ $this.options.button[1] +'</span>' + $button;
$buttonClass = ' D';
}
return '<div class="button'+$buttonClass+'">'+ $button + '</div>';
}());
if( !$this.options.fixed ){
$this.options.top = $this.options.hasOwnProperty('top') ? $this.options.top : 100;
$this.options.style = $this.options.style || '';
$this.options.style += ' top:'+ ( $document.body.scrollTop + $this.options.top) + 'px';
}
if( $this.options.type === 2){
$this.options.content = '<i></i><i class="loading"></i><i></i>';
}
$container.innerHTML = ($this.options.cover ? '<div '+ (typeof $this.options.cover === 'string' ? 'style="'+ $this.options.cover +'"' : '') +' class="cover"></div>' : '')
+'<div class="main" '+ (!$this.options.fixed ? 'style="position:static;"' : '') +'>'
+'<div class="section">'
+'<div class="inner '+ ($this.options.className ? $this.options.className : '') +' '+ ((!$this.options.type && !$this.options.cover) ? 'border ' : '') + ($this.options.animate ? 'animate' : '') +'" ' + ( $this.options.style ? 'style="'+$this.options.style+'"' : '' ) +'>'
+ $title
+'<div class="content">'+ $this.options.content +'</div>'
+ $button
+'</div>'
+'</div>'
+'</div>';
if(!$this.options.type || $this.options.type === 2){
var $dialogs = $document[$class]($Class[0] + $this.options.type), $length = $dialogs.length;
if($length >= 1){
YDialog.close($dialogs[0].getAttribute('index'))
}
}
$document.body.appendChild($container);
// var $element = $this.element = $('#'+$this.id)[0];
var $element = $this.element = document.getElementById($this.id);
$this.options.success && $this.options.success($element);
$this.index = $index++;
$this.action($this.options, $element);
};
$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;
}());
}()