高分请教!!!!!!!!如何修改js中alert显示效果

直接alert()就可以啊，不过效果你得自己加，这只是一种思路而已ps：window.alert = MyAlert; 换成window.alert = window.MyAlert = MyAlert;更完善

window.alert([sMessage]);这个东西是不能定义自己的样式的，除非你自己写一个出来。
思路基本是这样：
1、创建用于alert的Div，样式自定
2、创建一个遮罩层Mask，大小为满屏，其余样式自定
3、在用于alert的Div显示之前，先让Mask显示，并且其z-index必须为次大值，Div为最大，这样能保证
Div是显示到最上面的，而且画面上的其他空间都不能点击
4、关闭Div的时候，Mask也隐藏起来OK了
前些时候我在公司也是这样做了一个，效果不错的

记得alert不好改的吧
lz除非用div。alert的地方用弹出层。
可以修饰层到lz想要的效果

用div来代替alert，而div层的东西就可以自己定义了。。

您copy完整了没有？所有的浏览器都运行正常的，界面上如果有“haha”字样，说明已经成功运行了

高，实在是高。长见识了。先收藏。
想问一下Objector: noConflict是什么玩意？还有更多的资料么？

楼主自定义一个alert函数，换个名字，用弹出层来表示比较好用，想修改alert自身的函数，除非你改浏览器的源码

在IE下面可以用VBSCRIPT的MSGBOX来显示，其他的就只能用DIV来模拟了，很多人都写过的，可以自己搜一下

其实没有那么复杂：
简单一点的：<script>
window.alert = function(){
document.write(arguments[0]);
}
</script>复杂的：<script>
/**
* 自定义alert
* author: http://blog.csdn.net/sunxing007
**///因为alert有阻塞效果，当一个alert显示的时候，其他的alert都要等待
//所以在window里面放置一个消息队列。
window.msgQueue = [];
//alert开关，表示当前是否有alert显示。
window.alert_on = false;//重写alert函数
window.alert = function(){
//如果alert('_no_message_')被本函数内部使用
//所以忽略alert('_no_message_')
if(arguments[0]!='_no_message_'){
window.msgQueue[window.msgQueue.length] = arguments[0];
}
//如果当前alert正在被调用，则返回
if(window.alert_on==true){
return;
}
else{
//如果得不到alert_div,则说明弹出层和遮盖层还没有构建，则构建他们
if(!document.getElementById('alert_div')){
var div = document.createElement('div');
div.id = 'alert_div';
with(div.style){
height = '50px';
width = '200px';
position = 'absolute';
left = '300px';
top = '300px';
backgroundColor = 'lightyellow';
border = 'solid #ccc 1px';
zIndex = '1000';
display = 'none';
margin = '0px';
padding = '0px';
}
//关闭弹出层函数
window.closeAlert = function(){
document.getElementById('alert_div').style.display = 'none';
document.getElementById('alert_mask').style.display = 'none';
window.alert_on = false;
status = 'queue length: ' + window.msgQueue.length;
if(window.msgQueue.length>0){
window.alert('_no_message_');
}
}
div.innerHTML = "<div style='font-size: 9pt;height: 25px; padding: 5px; background-color: dodgerblue; color: #fff;' align='right'><a style='color: #fff;text-decoration: none;' alt='Close' href='#' onclick = 'closeAlert();'>X</a></div><div style='padding: 5px;' id='alert_text_div'></div>"
var mask = document.createElement('div');
mask.id='alert_mask';
with(mask.style){
height = document.body.clientHeight;
width = document.body.clientWidth;
position = 'absolute';
left = '0';
top = '0';
backgroundColor = '#ccc';
zIndex = 999;
display = 'none';
filter = 'alpha(opacity=50)';
}
document.body.appendChild(div);
document.body.appendChild(mask);
}
if(window.msgQueue.length>0){
var div = document.getElementById('alert_div');
var mask = document.getElementById('alert_mask');
var txtDiv = document.getElementById('alert_text_div');
div.style.display = '';
mask.style.display = '';
window.alert_on = true;
//取消息队列第一条显示出来。
txtDiv.innerText = window.msgQueue.shift();
}

}}</script><div><a href="http://blog.csdn.net/sunxing007">自定义alert效果</a></div>
<div><a href="#" onclick="alert('你点了我。');">点我测试</a></div>
<script>
//test case.
alert('自定义alert1.');alert('自定义alert2.');alert('自定义alert3.');
</script>

仅在ie作测试过， ff下要对样式作调整。

直接上代码：
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>弹出模态对话框测试[IE6下测试通过]</title><style type="text/css">
    .hideDlg
    {
        height:129px;width:368px;
        display:none;
    }
    .showDlg
    {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        height:129px;width:368px;
        position: absolute;
        display:block;
        z-index:5;
    }
    .showDeck {
        display:block;
        top:0px;
        left:0px;
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        position:absolute;
        z-index:3;
        background:#cccccc;
    }
    .hideDeck
    {
        display:none;
    }
</style><script type="text/javascript">
    function showDlg()
    {
        //显示遮盖的层
        var objDeck = document.getElementById("deck");
        if(!objDeck)
        {
            objDeck = document.createElement("div");
            objDeck.id="deck";
            document.body.appendChild(objDeck);
        }
        objDeck.className="showDeck";
        objDeck.style.filter="alpha(opacity=50)";
        objDeck.style.opacity=40/100;
        objDeck.style.MozOpacity=40/100;
        //显示遮盖的层end

        //禁用select
        hideOrShowSelect(true);

        //改变样式
        document.getElementById('divBox').className='showDlg';

        //调整位置至居中
        adjustLocation();

    }

    function cancel()
    {
        document.getElementById('divBox').className='hideDlg';
        document.getElementById("deck").className="hideDeck";
        hideOrShowSelect(false);
    }

    function hideOrShowSelect(v)
    {
        var allselect = document.getElementsByTagName("select");
        for (var i=0; i<allselect.length; i++)
        {
            //allselect[i].style.visibility = (v==true)?"hidden":"visible";
            allselect[i].disabled =(v==true)?"disabled":"";
        }
    }

    function adjustLocation()
    {
        var obox=document.getElementById('divBox');
        if (obox !=null && obox.style.display !="none")
        {
            var w=368;
            var h=129;
            var oLeft,oTop;

            if (window.innerWidth)
            {
                oLeft=window.pageXOffset+(window.innerWidth-w)/2 +"px";
                oTop=window.pageYOffset+(window.innerHeight-h)/2 +"px";
            }
            else
            {
                var dde=document.documentElement;
                oLeft=dde.scrollLeft+(dde.offsetWidth-w)/2 +"px";
                oTop=dde.scrollTop+(dde.offsetHeight-h)/2 +"px";
            }

            obox.style.left=oLeft;
            obox.style.top=oTop;
        }
    }

</script></head><body onresize="adjustLocation();">
    <input type="button" value="click me" onclick="showDlg();" size="10px" /><br/>
    <input type="text" value="" size="10px" /><a href="http://www.baidu.com" target="_blank">百度</a><br/>
    <select>
        <option selected="selected">1</option>
        <option>2</option>
    </select><br/>

    <div id="divBox" class="hideDlg" style="" >
            <table width="100%" style="height:100%; width: 100%;" id="table1">
                    <tr>
                        <td style="height: 20px; text-align: center;" colspan="3">请输入用户名及密码</td>
                    </tr>
                    <tr>
                        <td>用户名</td>
                        <td>
                            <input name="TextBox1" type="text" id="TextBox1" />
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td>
                            <input name="TextBox2" type="text" id="TextBox2" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" name="Button1" value="Login" id="Button1" size="10" onclick="alert(TextBox1.value)"/>  
                            <input type="button" name="Button2" value="Cancel" id="Button2" size="10" onclick="cancel();" />
                            </td>
                        <td> </td>
                    </tr>
            </table>
    </div></body>
</html>

http://topic.csdn.net/u/20100501/00/996fe9c6-e478-48f9-953b-95e8bd98bfe5.html

用jquery中的好多了,alert太丑了

其实就是要自定义一个函数来取代浏览器自带的alert
自带的不能改

http://blog.csdn.net/hch126163/archive/2010/11/05/5989554.aspx

调试易

高分请教!!!!!!!!如何修改js中alert显示效果

解决方案 »