javascript自定义alert弹窗

我们都知道js中的alert有弹窗提示的作用,但它在实践项目中很少使用,原因就是因为长的太难看!那么今天我就给大家讲一下如何来美化这个系统自带的alert!详细代码如下:


<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>教你如何更改网页的默认alert弹窗title>
head>
<body>

<script type="text/javascript">
window.alert = function(str)
{
    var shield = document.createElement("DIV");
    shield.id = "shield";
    shield.style.position = "absolute";
    shield.style.left = "50%";
    shield.style.top = "50%";
    shield.style.width = "280px";
    shield.style.height = "150px";
    shield.style.marginLeft = "-140px";
    shield.style.marginTop = "-110px";
    shield.style.zIndex = "25";
    var alertFram = document.createElement("DIV");
    alertFram.id="alertFram";
    alertFram.style.position = "absolute";
    alertFram.style.width = "280px";
    alertFram.style.height = "150px";
    alertFram.style.left = "50%";
    alertFram.style.top = "50%";
    alertFram.style.marginLeft = "-140px";
    alertFram.style.marginTop = "-110px";
    alertFram.style.textAlign = "center";
    alertFram.style.lineHeight = "150px";
    alertFram.style.zIndex = "300";
    strHtml = "
    \n"; strHtml += "
  • [自定义alert]
  • \n"
    ; strHtml += "
  • "+str+"
  • \n"
    ; strHtml += "
  • \n"
    ; strHtml += "
\n"
; alertFram.innerHTML = strHtml; document.body.appendChild(alertFram); document.body.appendChild(shield); this.doOk = function(){ alertFram.style.display = "none"; shield.style.display = "none"; } alertFram.focus(); document.body.onselectstart = function(){return false;}; }
script> <script> // 测试 alert alert('自定义弹窗'); script> body> html>

javascript自定义alert弹窗_第1张图片
原文地址:http://www.xttblog.com/?p=361

你可能感兴趣的:(javascript)