artDialog v6 手机端模板

现在工作中用到，之前就在用artDialog，弹窗插件，但是用在移动端端的话 就有别扭了，自己又不想改插件，好在插件的作者也提供的 丰富的自定义方法

所以就在 不修改插件的的基础上改了下模板

使用起来也不复杂，在手机端不使用原来的 CSS 文件，而是使用本文提到的 CSS 样式文件

JS 文件在引入插件之后引入即可

截图：

JS 代码

dialog.defaults.cancelValue = '取消';
dialog.defaults.okValue = '确认';
dialog.defaults.innerHTML = 
	  '<div i="dialog" class="ui_dialog_confirm">'
	+ '	<div class="ui_dialog">'
	+ '		<div class="ui_dialog_hd"><strong i="title" class="ui_dialog_title"></strong></div>'
	+ '		<div i="content" class="ui_dialog_bd"></div>'
	+ '		<div i="button" class="ui_dialog_ft">'
	+ '		</div>'
	+ '	</div>'
	+ '</div>';

CSS 代码

.ui_dialog {
	position: fixed;
	z-index: 13;
	width: 85%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
	background-color: #FAFAFC;
	text-align: center;
	border-radius: 3px;
}
.ui_dialog_confirm .ui_dialog .ui_dialog_hd {
	padding: 1.2em 20px .5em;
}
.ui_dialog_confirm .ui_dialog .ui_dialog_bd {
	text-align: left;
}
.ui_dialog_hd {
	padding: 1.2em 0 .5em;
}
.ui_dialog_title {
	font-weight: 400;
	font-size: 17px;
}
.ui_dialog_bd {
	padding: 0 20px;
	font-size: 15px;
	color: #888;
}
.ui_dialog_ft {
	position: relative;
	height: 42px;
	line-height: 42px;
	margin-top: 20px;
	font-size: 17px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.ui_dialog_ft button {
	font-size: 17px;
	list-style-type:none;
	background:none;
	border: none;
	height: 100%;
	display: block;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	  -ms-flex: 1;
		  flex: 1;
	color: #3CC51F;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ui_dialog_ft button:active {
	background-color: #EEEEEE;
}
.ui_dialog_ft:after {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	border-top: 1px solid #D5D5D6;
	color: #D5D5D6;
	-webkit-transform-origin: 0 0;
		  transform-origin: 0 0;
	-webkit-transform: scaleY(0.5);
		  transform: scaleY(0.5);
}
.ui_dialog_confirm .ui_dialog_ft button {
	position: relative;
}
.ui_dialog_confirm .ui_dialog_ft button:after {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	border-left: 1px solid #D5D5D6;
	color: #D5D5D6;
	-webkit-transform-origin: 0 0;
		  transform-origin: 0 0;
	-webkit-transform: scaleX(0.5);
		  transform: scaleX(0.5);
}
.ui_dialog_confirm .ui_dialog_ft button:first-child:after {
	display: none;
}
.ui_dialog_ft button[i-id=cancel] {
	color: #353535;
}
.ui_dialog_ft button[i-id=ok] {
	color: #0BB20C;
}

.ui_dialog .input {
    width: 100%;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    background-color: transparent;
    font-size: inherit;
    color: inherit;
    height: 1.41176471em;
    line-height: 1.41176471;
}

另外 也就只有一个人在家的时候才有时间有空闲开下电脑

dialog.js 源码