核心思路：設置一個隱藏的(display:none;)、背景偏暗的div及其子div作為對話框。當點擊某處時，將此div設置為顯示。
核心代碼例如以下(部分js代碼用於動態調整div內容的行高。這部分代碼能夠忽略):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="demo.css">
<script src="jquery-1.10.1.min.js"></script>
<script>
function getHeight(className) {
var height = $(className).height();
return height;
}
function setLineHeight(className) {
var height = getHeight(className) + "px";
$(className).css("line-height",height);
}
$(function() {
//調整行高並設置回調函數，窗體一動我也動
setLineHeight(".init-page-btn");
setLineHeight(".hidden-alert");
window.onresize = function(){
setLineHeight(".init-page-btn");
setLineHeight(".hidden-alert");
};
//點擊"點我"button就彈出窗體讓我填寫手機號碼
$(".init-page-btn").click(function(){
$(".hidden-bg").show();
setLineHeight(".hidden-alert");
});
//點擊彈出窗體中的"叉"，彈出窗體就消失
$(".hidden-alert-close").click(function(){
$(".hidden-bg").hide();
});
});
</script>
</head>
<body>
<div class="init-page">
<div class="init-page-btn">點我</div>
</div>
<div class="hidden-bg">
<div class="hidden-alert">
<span>請輸入手機號：<input type="text"></span>
<div class="hidden-alert-close">叉</div>
</div>
</div>
</body>
</html>
初始頁面效果：
彈出對話框后的效果為：
查看效果和完整代碼能夠下載下面文件：