因为项目中要显示一些对话框，但用alert显得太丑，后从网上找了一些插件，但有觉得不好用，因此自己试用CSS和jQuery写了一个对话框，代码如下：
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-315px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" rel="external nofollow" >
<script src="js/jquery-1.6.4.js">
</script>
<script src="js/jquery.mobile-1.0.1.js">
</script>
<link rel="stylesheet" href="css/jquery.mobile.simpledialog.css" rel="external nofollow" >
<script src="js/jquery.mobile.simpledialog.js">
</script>
<link rel="stylesheet" href="css/control_column.css" rel="external nofollow" >
<script>
$(function(){
$('#btnShowDialog1').click(function(){
messageBox('提示', '提示内容1', 1);
})
}) function messageBox(title, context, flag, funOK, funCancel)
{
var strMask = "";
strMask += '<div class="message-box-mask"><p></p><br></div>'
var strHtml = "";
strHtml += '<div class="message-box">';
strHtml += '<h3>' + title + '</h3>';
strHtml += '<div class="message-box-context">' + context + '</div>';
strHtml += '<div class="message-box-buttons">';
if(flag == 1)
{
strHtml += '<a id="btnOK" data-role="button" data-theme="b">确定</a>';
}
else if(flag == 2)
{
strHtml += '<div class="controls_group label_text"><div class="controls_row"><div class="controls_column_first controls_column_2">';
strHtml += '<a id="btnOK" data-role="button" data-theme="b">确定</a></div>';
strHtml += '<div class="controls_column_second controls_column_2">';
strHtml += '<a id="btnCancel" data-role="button" data-theme="b">取消</a></div></div>';
}
strHtml += '</div>';
strHtml += '</div>';
$('div[data-role="content"]').append(strMask);
$('div[data-role="content"]').append(strHtml);
$('.message-box-buttons a').each(function(){
$(this).button();
});
$('.message-box').css('display', 'block');
$('.message-box-mask').css('display', 'block');
$('.message-box-mask').css('opacity', '0.1');
$('.message-box-buttons #btnOK').click(function(){
$('.message-box').css('display', 'none');
$('.message-box-mask').css('display', 'none');
$('.message-box-mask').css('opacity', '0.1');
if(funOK)
{
funOK();
}
});
$('.message-box-buttons #btnCancel').click(function(){
$('.message-box').css('display', 'none');
$('.message-box-mask').css('display', 'none');
$('.message-box-mask').css('opacity', '0.1');
if(funCancel)
{
funCancel();
}
});
} </script>
<style type="text/css">
.message-box-mask
{
width:100%;
height:100%;
line-height:100%;
background-color:gray;
z-index:100;
position:fixed;
top:0;
left:0;
opacity:0.1 !important;
}
.message-box
{
width:80%;
margin:0 auto;
padding:0;
text-align:center;
position:fixed;
top:10%;
left:10%;
z-index:1000;
text-shadow:none !important;
background-color:transparent;
} .message-box h3
{
width:100%;
margin:0 auto;
padding:0;
background-color:silver;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.message-box-context
{
width:100%;
margin:0 auto;
padding:0;
background-color:white;
text-align:left;
}
.message-box-buttons
{
width:100%;
margin:0 auto;
padding:10px 0;
background-color:silver;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.message-box-buttons .control_row, .message-box-buttons .controls_column_first, .message-box-buttons .controls_column_second
{
background-color:silver; } .message-box-buttons .controls_column_first
{
border-bottom-left-radius:10px;
} .message-box-buttons .controls_column_second
{
border-bottom-right-radius:10px;
}
</style>
</head>
<body onload="initPage();">
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>GroupBox</h1>
</div>
<div data-role="content">
<div>
<a id="btnShowDialog1" data-role="button" data-theme="b">显示对话框</a>
</div>
<div style="margin-top:100px;">
<a id="btnShowDialog2" data-role="button" data-theme="b" onclick="messageBox('提示','提示内容2', 2)">显示对话框</a>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>GroupBox</h1>
</div>
</div>
</body>
</html>
主要思想是通过绝对定位的方式和z-index来使对话框显示在最前面，而为了实现模态对话框的效果，添加了一个mask层，mask的思路也对话框一样。试用效果如下：
使用的使用只用给messageBox函数中传递相关参数就可，算是很方便了。
