js有三種默認提示框
提示框 alert('hello world!');
確認框 var result=confirm('確認刪除XX文件？');result為bool類型
回復確認框 var result=prompt('請輸入文件標題：');result返回輸入的值
下文通過js自動生成一個自定義提示框
function showDialog(content) { var layer = document.createElement("div"); layer.id = "layer"; var style = { background: "#ccc", position: "absolute", zIndex: 10, width: "auto", height: "40px", left: "50%", top: "0%", marginLeft: "-100px", marginTop: "10px", padding: "4px 10px" } for (var i in style) { layer.style[i] = style[i]; } if (document.getElementById("layer") == null) { document.body.appendChild(layer); layer.innerHTML = content; layer.style.textAlign = "center"; layer.style.lineHeight = "40px"; setTimeout("document.body.removeChild(layer)", 3000) } }
效果如下：
下文提供一個自定義提示框的案例，通過另一種方案（樣式設置）來實現：
1 <div class="confirmWindow" id="confirmwindow">2 <div class="body">3 <div class="content">確認要刪除XX文件么？</div>4 <div class="btns">5 <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel" onClick="cancelOnClick()">取消</a>6 <a href="javascript:void(0);" class="btn-confirm" id="btn_ok" onClick="okOnClick()">確認</a>7 </div>8 </div>9 </div>
通過js設置元素的display屬性，來控制提示框的顯示隱藏
以上demo，完整案例請下載：example-MyconfirmDialog
或者訪問github地址：https://github.com/Kybs0/Kybs0HtmlCssJsDemo/tree/master/definedAlertWindow
