jQuery手机移动端模态对话框插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机移动端模态对话框插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>jQuery手机移动端模态对话框插件</title>
<link rel="stylesheet" href="css/tpl-style.css">
<link rel="stylesheet" href="css/dialog.css">
<style type="text/css">
.button { padding: 0 15px; cursor: pointer; margin-right: 15px; background: #f6f7fb; border: 1px solid #c7ced2; border-radius: 2px; color: #191d24; display: inline-block; height: 40px; line-height: 40px; text-align: center; outline:none; font-family: "Microsoft Yahei"; }
.button:hover { background-color: #f2f2f2; }
.tpl-wrapper{margin-top: 20px;}
a{border-bottom: none;color:#2fa0cc;}
</style>

</head>
<body>
<div class="tpl-wrapper">
	<div class="panel panel-green">
	<div class="panel-hd"><h2>示例展示</h2></div>
	<div class="panel-bd">				
		<div class="example-wrap">
			
			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">默认</h3>
				<div class="example-show">
					<button id="btn-01" class="button" type="button">弹出对话框</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-01').click(function(){
$.dialog({
contentHtml : '&ltp&gt我是默认弹出对话框示例展示。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">自动关闭</h3>
				<div class="example-show">
					<button id="btn-02" class="button" type="button">弹出对话框</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-01').click(function(){
$.dialog({
autoClose : 2500,
contentHtml : '&ltp&gt我是自动关闭的对话框示例展示。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">无标题</h3>
				<div class="example-show">
					<button id="btn-03" class="button" type="button">弹出对话框</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-03').click(function(){
$.dialog({
showTitle : false,
contentHtml : '&ltp&gt我是没有标题的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">自定义标题</h3>
				<div class="example-show">
					<button id="btn-04" class="button" type="button">弹出对话框</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-04').click(function(){
$.dialog({
titleText : '自定义标题',
contentHtml : '&ltp&gt我是自定义标题的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">Comfirm 类型</h3>
				<div class="example-show">
					<button id="btn-05" class="button" type="button">确定/取消</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-05').click(function(){
$.dialog({
type : 'confirm',
contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">Comfirm 类型, 自定义按钮文字</h3>
				<div class="example-show">
					<button id="btn-06" class="button" type="button">确定/取消</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-06').click(function(){
$.dialog({
type : 'confirm',
buttonText : {
	ok : '自定义-确定',
	cancel : '自定义-取消'
},
contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">Comfirm 类型, 按钮回调函数</h3>
				<div class="example-show">
					<button id="btn-07" class="button" type="button">确定/取消</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-07').click(function(){
$.dialog({
type : 'confirm',
onClickOk : function(){
   alert('你点了确定~~');
},
onClickCancel : function(){        		
   alert('你点了取消~~');
},
contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->
			


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">Comfirm 类型, 状态回调函数</h3>
				<div class="example-show">
					<button id="btn-08" class="button" type="button">确定/取消</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-08').click(function(){
$.dialog({
type : 'confirm',
onBeforeShow : function(){
   alert('显示前执行~~')
},
onShow : function(){
   alert('显示完成后执行~~')
},
onBeforeClosed : function(){
   alert('关闭前执行~~')
},
onClosed : function(){
   alert('关闭后执行，可以看页面title是否改变~~');
   document.title = '我已经关闭拉！';
},
contentHtml : '&ltp&gt我是confirm类型的对话框。&lt/p&gt &ltp&gt我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。&lt/p&gt'
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">info 类型</h3>
				<div class="example-show">
					<button id="btn-09" class="button" type="button">加载中</button>
					<button id="btn-10" class="button" type="button">成功</button>
					<button id="btn-11" class="button" type="button">失败</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-09').click(function(){
$.dialog({
type : 'info',
infoText : '加载中…',
infoIcon : 'images/icon/loading.gif',
autoClose : 2500
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">info 类型, HTML创建内容</h3>
				<div class="example-show">
					<button id="btn-12" class="button" type="button">成功</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-12').click(function(){
$.dialog({
type : 'info',
contentHtml : '&ltimg class="info-icon" src="images/icon/success.png" alt="操作成功" /&gt&ltp class="info-text"&gt操作成功&lt/p&gt',
autoClose : 2500
});
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->


			<!-- S example-item -->
			<div class="example-item">
				<h3 class="example-name">info 类型, 更改状态</h3>
				<div class="example-show">
					<button id="btn-13" class="button" type="button">加载中 to 成功</button>
				</div>
				<div class="example-code">
<pre class="pre-scrollable"><code>$('#btn-12').click(function(){
var infoDialog = $.dialog({
type : 'info',
infoText : '加载中…',
infoIcon : 'images/icon/loading.gif'			
});

window.setTimeout(function() {
infoDialog.dialog.update({
	autoClose : 1500,
	infoText : '操作成功',
	infoIcon : 'images/icon/success.png'
});
}, 2500);
});</code></pre>
				</div>
			</div>
			<!-- E example-item -->
		</div>
	</div>			
</div>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/dialog.js"></script>
<script src="js/example.js"></script>
</body>
</html>

JS代码(example.js):

$(document).ready(function(){
	/* * alert type */
$('#btn-01').click(function(){
	$.dialog({
	contentHtml:'<p>我是默认弹出对话框示例展示。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。</p>'}
);
}
);
	$('#btn-02').click(function(){
	$.dialog({
	autoClose:2500,contentHtml:'<p>我是自动关闭的对话框示例展示。</p><p>我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。</p>'}
);
}
);
	$('#btn-03').click(function(){
	$.dialog({
	showTitle:false,contentHtml:'<p>我是没有标题的对话框。</p><p>我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。</p>'}
);
}
);
	$('#btn-04').click(function(){
	$.dialog({
	titleText:'自定义标题',contentHtml:'<p>我是自定义标题的对话框。</p><p>我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。</p>'}
);
}
);
	/* * confirm type */
$('#btn-05').click(function(){
	$.dialog({
	type:'confirm',contentHtml:'<p>我是confirm类型的对话框。</p><p>我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。</p>'}
);
}
);
	$('#btn-06').click(function(){
	$.dialog({
	type:'confirm',buttonText:{
	ok:'自定义-确定',cancel:'自定义-取消'}
,contentHtml:'<p>我是confirm类型的对话框。</p><p>我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。</p>'}
);
}
);
	$('#btn-07').click(function(){
	$.dialog({
	type:'confirm',onClickOk:function(){
	alert('你点了确定~~');
}
,onClickCancel:function(){
	alert('你点了取消~~');
}
,contentHtml:'<p>我是confirm类型的对话框。</p><p>我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。</p>'}
);
}
);
	$('#btn-08').click(function(){
	$.dialog({
	type:'confirm',onBeforeShow:function(){
	alert('显示前执行~~')}
,onShow:function(){
	alert('显示完成后执行~~')}
,onBeforeClosed:function(){
	alert('关闭前执行~~')}
,onClosed:function(){
	alert('关闭后执行，可以看页面title是否改变~~');
	document.title = '我已经关闭拉！';
}
,contentHtml:'<p>我是confirm类型的对话框。</p><p>我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示，仅仅用来占位撑起提示内容的高度。</p>'}
);
}
);
	/* * info type */
$('#btn-09').click(function(){
	$.dialog({
	type:'info',infoText:'加载中…',infoIcon:'images/icon/loading.gif',autoClose:2500}
);
}
);
	$('#btn-10').click(function(){
	$.dialog({
	type:'info',infoText:'操作成功',infoIcon:'images/icon/success.png',autoClose:2500}
);
}
);
	$('#btn-11').click(function(){
	$.dialog({
	type:'info',infoText:'操作失败',infoIcon:'images/icon/fail.png',autoClose:2500}
);
}
);
	$('#btn-12').click(function(){
	$.dialog({
	type:'info',contentHtml:'<img class="info-icon" src="images/icon/success.png" alt="操作成功" /><p class="info-text">操作成功</p>',autoClose:2500}
);
}
);
	$('#btn-13').click(function(){
	var infoDialog = $.dialog({
	type:'info',infoText:'加载中…',infoIcon:'images/icon/loading.gif'}
);
	window.setTimeout(function(){
	infoDialog.dialog.update({
	autoClose:1500,infoText:'操作成功',infoIcon:'images/icon/success.png'}
);
}
,2500);
}
);
}
);

CSS代码(tpl-style.css):

*{margin:0;padding:0;box-sizing:border-box;}
a,img{border:none;}
ul,ol{margin-left:20px;}
li{padding:5px 0;}
body{background-color:#ebe7df;color:#333;font:14px/1.6 "Microsoft Yahei",Helvetica,Arial,sans-serif;}
a{border-bottom:1px solid #bbb;color:#666;text-decoration:none;}
a:hover{color:#333;}
.tpl-wrapper{margin:0 auto;padding:0 15px;max-width:1120px;min-width:320px;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.plugin-intro{padding:20px;text-align:center;margin-bottom:45px;}
.plugin-intro h1{margin-bottom:15px;font-size:42px;color:#ff3b30;font-weight:400;}
.plugin-intro p{font-size:16px;color:#808080;}
.panel{background:#fff;color:#555;font-size:16px;position:relative;margin-bottom:55px;}
.panel-hd h2{font-size:18px;font-weight:400;color:#fff;height:50px;line-height:50px;text-align:center;}
.panel-bd{padding:41px 60px 39px;}
.panel-ft{background:#f5f3ef;color:#555;font-size:14px;height:45px;line-height:45px;padding:0 60px;}
.panel-ft a{color:#999;}
.panel-ft a:hover{color:#666;}
.panel-ft .col-2-1{width:49%;display:inline-block;}
.panel-blue .panel-hd h2{background:#2489c5;}
.panel-green .panel-hd h2{background:#1f7f5c;}
.panel-orange .panel-hd h2{background:#ff6700;}
.panel-purple .panel-hd h2{background:#3bb4f2;}
.panel-simple{margin-bottom:50px;}
.panel-simple-hd h2{font-size:26px;font-weight:400;height:50px;line-height:50px;text-align:center;}
.panel-simple-bd{font-size:15px;}
.panel-simple-bd p{margin:10px 0;}
.example-item{margin-bottom:45px;}
.example-name{font-size:22px;font-weight:400;margin-bottom:15px;}
.example-code{margin-top:20px;}
.example-code code{padding:2px 4px;background-color:#f9f2f4;color:#c7254e;font-size:90%;border-radius:4px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
.example-code pre{display:block;margin:0 0 15px;overflow-y:hidden;background-color:#f7f7f7;border:1px solid #eee;border-radius:4px;}
.example-code .pre-scrollable{max-height:250px;overflow:auto;}
.example-code.example-code pre code{padding:0;background-color:transparent;display:block;margin:10px 15px;line-height:1.5;color:#808080;word-break:break-all;word-wrap:break-word;}
.example-code p{margin:5px 10px;}
/* table */
.parameter-desc{min-height:0.01%;overflow-x auto;}
.parameter-desc table{border-spacing:0;border-collapse:collapse;width:100%;max-width:100%;margin-bottom:20px;}
.parameter-desc table th,.parameter-desc table td{padding:12px 15px;border:1px solid #f2f2f2;}
.parameter-desc table thead th,.parameter-desc table thead td{font-weight:400;font-size:16px;background-color:#f3f2ef;}
.parameter-desc table tbody tr:hover{background-color:#f7f7f7;}
.parameter-desc table > tbody > tr > td,.parameter-desc table > tbody > tr > th,.parameter-desc table > tfoot > tr > td,.parameter-desc table > tfoot > tr > th,.parameter-desc table > thead > tr > td,.parameter-desc table > thead > tr > th{white-space:nowrap;}
.download{margin-bottom:65px;text-align:center;}
.download a{background:#e76b66;color:#fff;display:block;font-size:18px;height:60px;line-height:60px;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;}
.download a:hover{background-color:#e24f49;}
.footer{text-align:center;background:#e2dfd8;color:#666;padding:25px 0;}
.fork-me{background:#28545b url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnElEQVR4XqVSgQmEMAyszw/gCI7wK7iBblBHcISfxG6gG/gjuIGO0A3ygaYQCCG2HhweF+6aShsAcDcBJBpuvlwFagqGJwUf5EL6kgV2eEe2yIgc9QI73CMPs8AOywI7nHDSzCxYxcnJ6+hrFnQkJrb2nGclP3Fj+vf0IUV1AgCZHiS86lOObxD4qqSD5mtXmAq1e2fB3vqXact3f/JmXumJlVq1AAAAAElFTkSuQmCC") no-repeat scroll 50% center;height:40px;width:40px;overflow:hidden;position:fixed;right:0;top:0;text-indent:100%;white-space:nowrap;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;}
.fork-me:hover{width:45px;height:45px;background-color:#1f7f5c;}
@media screen and (max-width:1199px){.parameter-desc{margin-bottom:15px;overflow-y:hidden;width:100%;}
}
@media screen and (max-width:767px){.tpl-wrapper{padding:0;}
.panel-simple{padding:0 15px;}
.download{padding:0 15px;}
.footer{padding-left:15px;padding-right:15px;}
}
@media screen and (max-width:640px){.plugin-intro{margin-bottom:25px;}
.panel{margin-bottom:35px;font-size:14px;}
.panel-hd h2{height:45px;line-height:45px;}
.panel-bd{padding:21px 20px 19px;}
.panel-ft{padding:0 20px;}
.download a{height:45px;line-height:45px;font-size:16px;}
.fork-me{display:none;}
}
@media screen and (max-width:480px){}

附件:下载该文件资源,减少时间成本(增值服务)