怎么改变js alert出来的弹出框的样式

JavaScript020

怎么改变js alert出来的弹出框的样式,第1张

自带的alert的弹框样式应该不太好修改，都是javascript定义好的，但是你可以使用一些插件，比如layer这种插件，你可以看看，使用简单，在项目中引入插件包，然后在界面上就可以直接使用了，语法也简单，你可以参考官网。

没办法控制吧，你可以自己写一个仿alert的提示框

给你个例子参考

<html>

<head>

<title>

</title>

<style type="text/css">

*{

margin:0padding:0

}

.STYLE1 {color: #F9CADE}

</style>

</head>

<body>

<div class="cecmbody" id="cecmpolicy">

<div class="leftClass">

<input type="button" value="点击这里" onclick="sAlert('我是一个渐变的sAlert',this)" />

</p>

<p>测试</p><p>测试</p><p>测试</p><p>测试</p>

</div>

<div class="rightClass">

</div>

</div>

<script type="text/javascript" language="javascript">

function sAlert(txt){

var eSrc=(document.all)?window.event.srcElement:arguments[1]

var shield = document.createElement("DIV")

shield.id = "shield"

shield.style.position = "absolute"

shield.style.left = "0px"

shield.style.top = "0px"

shield.style.width = "100%"

shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px"

shield.style.background = "#333"

shield.style.textAlign = "center"

shield.style.zIndex = "10000"

shield.style.filter = "alpha(opacity=0)"

shield.style.opacity = 0

var alertFram = document.createElement("DIV")

alertFram.id="alertFram"

alertFram.style.position = "absolute"

alertFram.style.left = "50%"

alertFram.style.top = "50%"

alertFram.style.marginLeft = "-225px"

alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px"

alertFram.style.width = "450px"

alertFram.style.height = "150px"

alertFram.style.background = "#ccc"

alertFram.style.textAlign = "center"

alertFram.style.lineHeight = "150px"

alertFram.style.zIndex = "10001"

strHtml = "<ul style=\"list-style:nonemargin:0pxpadding:0pxwidth:100%\">\n"

strHtml += " <li style=\"background:#DD828Dtext-align:leftpadding-left:20pxfont-size:14pxfont-weight:boldheight:25pxline-height:25pxborder:1px solid #F9CADE\">[系统提示]</li>\n"

strHtml += " <li style=\"background:#ffftext-align:centerfont-size:12pxheight:120pxline-height:120pxborder-left:1px solid #F9CADEborder-right:1px solid #F9CADE\">"+txt+"</li>\n"

strHtml += " <li style=\"background:#ffftext-align:centerfont-size:12pxheight:120pxline-height:120pxborder-left:1px solid #F9CADEborder-right:1px solid #F9CADE\"><input type=\"text\" value=\"确 定\" /></li>\n"

strHtml += " <li style=\"background:#FDEEF4text-align:centerfont-weight:boldheight:25pxline-height:25pxborder:1px solid #F9CADE\"><input type=\"button\" value=\"确 定\" id=\"do_OK\" onclick=\"doOk()\" /></li>\n"

strHtml += "</ul>\n"

alertFram.innerHTML = strHtml

document.body.appendChild(alertFram)

document.body.appendChild(shield)

this.setOpacity = function(obj,opacity){

if(opacity>=1)opacity=opacity/100

try{ obj.style.opacity=opacity}catch(e){}

try{

if(obj.filters.length>0&&obj.filters("alpha")){

obj.filters("alpha").opacity=opacity*100

}else{

obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")"

}

}catch(e){}

}

var c = 0

this.doAlpha = function(){

if (++c >20){clearInterval(ad)return 0}

setOpacity(shield,c)

}

var ad = setInterval("doAlpha()",1)

this.doOk = function(){

//alertFram.style.display = "none"

//shield.style.display = "none"

document.body.removeChild(alertFram)

document.body.removeChild(shield)

eSrc.focus()

document.body.onselectstart = function(){return true}

document.body.oncontextmenu = function(){return true}

}

document.getElementById("do_OK").focus()

eSrc.blur()

document.body.onselectstart = function(){return false}

document.body.oncontextmenu = function(){return false}

}

</script>

</body>

</html>

<?xml version="1.0" encoding="UTF-8"?> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>  - http://www.never-online.net </title>

  <meta http-equiv="ImageToolbar" content="no" />

  <meta name="author" content="BlueDestiny, never-online"/>

  <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Refercence, BlueDestiny, never-online, www.never-online.net"/>

  <meta name="description" content="BlueDestiny, never-online"/>

  <meta name="title" content="Mozilla CSS Refercence And Demo - http://www.never-online.net" />

  <meta name="creator.name" content="Genius Lau, never-online, blueDestiny" />

  <style type="text/css" media="all" title="Default">

  </style>

  <script type="text/javascript">

  //<![CDATA[

function window.alert(s) {

divAlert.style.display = "block"

}

onload = function() { alert("never-online") }

  //]]>

  </script>

</head>

<body id="www.never-online.net">

<div align="center" id="divAlert">

<div style="border:2px outset buttonhighlight width:300px height: 100pxfont:9pt Verdana background-color:buttonface">

<div style="background-color:highlightpadding:1pxcolor:whitetext-align:leftfont-weight:bold">ALERT</div>

<div style=" padding:30px">

blog.never-online.net

<p> <button onclick="divAlert.style.display='none'"> - O K - </button> </p>

</div>

</div>

</div>

</body>

</html>