如何实现类似于alert的功能

看到一些例子，用DIV实现，的确设置了alert的样式，但是忽略了一个问题，JS本身的alert，会等待用户点击“确定”之后才会继续执行下面的JS代码
不知道该如何实现？谢谢大家我想要的效果是，当用户点击自己定义的类似alert功能之后，才会执行alert('abcdeg');这段JS
=====================附上测试的代码===============================
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>测试Alert</title> <script type="text/javascript" language="javascript">
            function sAlert(str){
            var msgw,msgh,bordercolor;
            msgw=400;//提示窗口的宽度
            msgh=100;//提示窗口的高度
            bordercolor="#336699";//提示窗口的边框颜色
            titlecolor="#99CCFF";//提示窗口的标题颜色
            
            var sWidth,sHeight;
            sWidth=document.body.offsetWidth;
            sHeight=document.body.offsetHeight;
                       var bgObj=document.createElement("div");
            bgObj.setAttribute('id','bgDiv');
            bgObj.style.position="absolute";
            bgObj.style.top="0";
            bgObj.style.background="#777";
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
            bgObj.style.opacity="0.6";
            bgObj.style.left="0";
            bgObj.style.width=sWidth + "px";
            bgObj.style.height=sHeight + "px";
            document.body.appendChild(bgObj);
            var msgObj=document.createElement("div")
            msgObj.setAttribute("id","msgDiv");
            msgObj.setAttribute("align","center");
            msgObj.style.position="absolute";
            msgObj.style.background="white";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.border="1px solid " + bordercolor;
            msgObj.style.width=msgw + "px";
            msgObj.style.height=msgh + "px";
          msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
          msgObj.style.left=(sWidth-msgw)/2 + "px";
          var title=document.createElement("h4");
          title.setAttribute("id","msgTitle");
          title.setAttribute("align","right");
          title.style.margin="0";
          title.style.padding="3px";
          title.style.background=bordercolor;
          title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
          title.style.opacity="0.75";
          title.style.border="1px solid " + bordercolor;
          title.style.height="18px";
          title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
          title.style.color="white";
          title.style.cursor="pointer";
          title.innerHTML="关闭";
          title.onclick=function(){
            document.body.removeChild(bgObj);
        document.getElementById("msgDiv").removeChild(title);
        document.body.removeChild(msgObj);
        }
          document.body.appendChild(msgObj);
          document.getElementById("msgDiv").appendChild(title);
          var txt=document.createElement("p");
          txt.style.margin="1em 0"
          txt.setAttribute("id","msgTxt");
          txt.innerHTML=str;
      document.getElementById("msgDiv").appendChild(txt);
      }
        </script></HEAD>
<BODY>
<input type="button" value="点击这里" onclick="sAlert('测试效果<br>还可以直接书写HTML代码 <br>&copy; 2006');alert('abcdeg');" />
</BODY>    
  </html>   

解决方案 »

  1.   

    试试把往下执行的部分写成函数
    在那个模拟alert的按纽上加那个事件....
    个人愚见,错了莫怪.........
      

  2.   

    呵呵，重写alert对话框么？  我见有人用模式对话框重新搞成了自己需要的形式看着也不错哦~
      

  3.   

    想在DIV弹出的时候阻塞程序执行恐怕不行。
    因为一个页面本身还是在一个线程中。
    如果程序阻塞的话，也就无法接收用户输入了.
      

  4.   

    这种效果?<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>测试Alert </title> <script type="text/javascript" language="javascript"> 
                function sAlert(str){ 
                var msgw,msgh,bordercolor; 
                msgw=400;//提示窗口的宽度 
                msgh=100;//提示窗口的高度 
                bordercolor="#336699";//提示窗口的边框颜色 
                titlecolor="#99CCFF";//提示窗口的标题颜色 
                
                var sWidth,sHeight; 
                sWidth=document.body.offsetWidth; 
                sHeight=document.body.offsetHeight; 
                          var bgObj=document.createElement("div"); 
                bgObj.setAttribute('id','bgDiv'); 
                bgObj.style.position="absolute"; 
                bgObj.style.top="0"; 
                bgObj.style.background="#777"; 
                bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 
                bgObj.style.opacity="0.6"; 
                bgObj.style.left="0"; 
                bgObj.style.width=sWidth + "px"; 
                bgObj.style.height=sHeight + "px"; 
                document.body.appendChild(bgObj); 
                var msgObj=document.createElement("div") 
                msgObj.setAttribute("id","msgDiv"); 
                msgObj.setAttribute("align","center"); 
                msgObj.style.position="absolute"; 
                msgObj.style.background="white"; 
                msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 
                msgObj.style.border="1px solid " + bordercolor; 
                msgObj.style.width=msgw + "px"; 
                msgObj.style.height=msgh + "px"; 
              msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px"; 
              msgObj.style.left=(sWidth-msgw)/2 + "px"; 
              var title=document.createElement("h4"); 
              title.setAttribute("id","msgTitle"); 
              title.setAttribute("align","right"); 
              title.style.margin="0"; 
              title.style.padding="3px"; 
              title.style.background=bordercolor; 
              title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
              title.style.opacity="0.75"; 
              title.style.border="1px solid " + bordercolor; 
              title.style.height="18px"; 
              title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
              title.style.color="white"; 
              title.style.cursor="pointer"; 
              title.innerHTML="关闭"; 
              title.onclick=function(){ 
                document.body.removeChild(bgObj); 
            document.getElementById("msgDiv").removeChild(title); 
            document.body.removeChild(msgObj); 
            } 
              document.body.appendChild(msgObj); 
              document.getElementById("msgDiv").appendChild(title); 
              var txt=document.createElement("p"); 
              txt.style.margin="1em 0" 
              txt.setAttribute("id","msgTxt"); 
              txt.innerHTML=str + "<a href='#' onClick=\"alert('你干嘛点击我??')\">测试,点我</a>"; 
          document.getElementById("msgDiv").appendChild(txt); 
          } 
            </script> </HEAD> 
    <BODY> 
    <input type="button" value="点击这里" onclick="sAlert('测试效果 <br>还可以直接书写HTML代码 <br>&copy; 2006');" /> 
    </BODY>     
      </html>
      

  5.   

    你的这个模仿alert效果是无法停止下面的代码的执行的，你需要在点击层的关闭按钮时执行你需要的代码<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>测试Alert </title> <script type="text/javascript" language="javascript"> 
                function sAlert(str,func,param){ 
                var msgw,msgh,bordercolor; 
                msgw=400;//提示窗口的宽度 
                msgh=100;//提示窗口的高度 
                bordercolor="#336699";//提示窗口的边框颜色 
                titlecolor="#99CCFF";//提示窗口的标题颜色 
                
                var sWidth,sHeight; 
                sWidth=document.body.offsetWidth; 
                sHeight=document.body.offsetHeight; 
                          var bgObj=document.createElement("div"); 
                bgObj.setAttribute('id','bgDiv'); 
                bgObj.style.position="absolute"; 
                bgObj.style.top="0"; 
                bgObj.style.background="#777"; 
                bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 
                bgObj.style.opacity="0.6"; 
                bgObj.style.left="0"; 
                bgObj.style.width=sWidth + "px"; 
                bgObj.style.height=sHeight + "px"; 
                document.body.appendChild(bgObj); 
                var msgObj=document.createElement("div") 
                msgObj.setAttribute("id","msgDiv"); 
                msgObj.setAttribute("align","center"); 
                msgObj.style.position="absolute"; 
                msgObj.style.background="white"; 
                msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 
                msgObj.style.border="1px solid " + bordercolor; 
                msgObj.style.width=msgw + "px"; 
                msgObj.style.height=msgh + "px"; 
              msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px"; 
              msgObj.style.left=(sWidth-msgw)/2 + "px"; 
              var title=document.createElement("h4"); 
              title.setAttribute("id","msgTitle"); 
              title.setAttribute("align","right"); 
              title.style.margin="0"; 
              title.style.padding="3px"; 
              title.style.background=bordercolor; 
              title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
              title.style.opacity="0.75"; 
              title.style.border="1px solid " + bordercolor; 
              title.style.height="18px"; 
              title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
              title.style.color="white"; 
              title.style.cursor="pointer"; 
              title.innerHTML="关闭"; 
              title.onclick=function(){ 
                document.body.removeChild(bgObj); 
            document.getElementById("msgDiv").removeChild(title); 
            document.body.removeChild(msgObj); 
    func(param)//执行传递进来的函数及参数
            } 
              document.body.appendChild(msgObj); 
              document.getElementById("msgDiv").appendChild(title); 
              var txt=document.createElement("p"); 
              txt.style.margin="1em 0" 
              txt.setAttribute("id","msgTxt"); 
              txt.innerHTML=str; 
          document.getElementById("msgDiv").appendChild(txt); 
          } 
            </script> </HEAD> 
    <BODY> 
    <input type="button" value="点击这里" onclick="sAlert('测试效果 <br>还可以直接书写HTML代码 <br>&copy; 2006',alert,1)" /> <br/>
    <input type="button" value="点击这里" onclick="sAlert('测试效果 <br>还可以直接书写HTML代码 <br>&copy; 2006',alert,12)" /> <br/>
    <input type="button" value="点击这里" onclick="sAlert('测试效果 <br>还可以直接书写HTML代码 <br>&copy; 2006',alert,123)" /> <br/>
    </BODY>     
      </html>  
      

  6.   

    深入的调查发现,
    楼主的要求居然可以实现.
    问题的关键是如何实现javascript的多线程编程.
    实现的原理大概的想法如下:
    (1) 显示对话框层之后.
    (2) 将全局的对话框标志设定为ON.
    (3) 循环检索标志位的状态,直到标志被设置为OFF后,退出循环继续后面的处理.
    (4) 当按下对话框的按钮后,将标志位置为OFF.使用Concurrent.Thread.js库可以实现多线程编程.
    不过这个库有500K.
    下面是使用这个库作成的一个sample供参考.<html>
    <script language="javascript">
    function closeMe() {
    isOpened=false;
    }
    </script>

    <body>
    <input type="button" value="test" onclick="closeMe()">
    </body>
    <script type="text/javascript" src="Concurrent.Thread.js"></script>
    <script language="javascript" type="text/x-script.multithreaded-js"> var isOpened = true;

    var i = 1;
    while ( 1 ) {
    window.status = i++;
    if( isOpened == false ){
    alert( "close" );
    break;
    }
    }
    </script>
    </html>
      

  7.   

    下载地址为
    http://jsthread.sourceforge.net/cgi-bin/wiki/wiki.cgi?page=API_Specification#p5
      

  8.   

    利用多线程编程的实现。
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>测试Alert </title>
        <script type="text/javascript" src="Concurrent.Thread-full.js">
        </script>
        <script language="JavaScript">
            var _isAlert = 0;
            function _Alert1(str, param){
                var msgw, msgh, bordercolor;
                msgw = 400;//提示窗口的宽度  
                msgh = 100;//提示窗口的高度 
                bordercolor = "#336699";//提示窗口的边框颜色  
                titlecolor = "#99CCFF";//提示窗口的标题颜色 
                var sWidth, sHeight;
                sWidth = document.body.offsetWidth;
                sHeight = document.body.offsetHeight;
                var bgObj = document.createElement("div");
                bgObj.setAttribute('id', 'bgDiv');
                bgObj.style.position = "absolute";
                bgObj.style.top = "0";
                bgObj.style.background = "#777";
                bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
                bgObj.style.opacity = "0.6";
                bgObj.style.left = "0";
                bgObj.style.width = sWidth + "px";
                bgObj.style.height = sHeight + "px";
                document.body.appendChild(bgObj);
                var msgObj = document.createElement("div")
                msgObj.setAttribute("id", "msgDiv");
                msgObj.setAttribute("align", "center");
                msgObj.style.position = "absolute";
                msgObj.style.background = "white";
                msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
                msgObj.style.border = "1px solid " + bordercolor;
                msgObj.style.width = msgw + "px";
                msgObj.style.height = msgh + "px";
                msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";
                msgObj.style.left = (sWidth - msgw) / 2 + "px";
                var title = document.createElement("h4");
                title.setAttribute("id", "msgTitle");
                title.setAttribute("align", "right");
                title.style.margin = "0";
                title.style.padding = "3px";
                title.style.background = bordercolor;
                title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
                title.style.opacity = "0.75";
                title.style.border = "1px solid " + bordercolor;
                title.style.height = "18px";
                title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
                title.style.color = "white";
                title.style.cursor = "pointer";
                title.innerHTML = "关闭";
                title.onclick = function(){
                    document.body.removeChild(bgObj);
                    document.getElementById("msgDiv").removeChild(title);
                    document.body.removeChild(msgObj);
                    _isAlert = 0;
                }
                document.body.appendChild(msgObj);
                document.getElementById("msgDiv").appendChild(title);
                var txt = document.createElement("p");
                txt.style.margin = "1em 0"
                txt.setAttribute("id", "msgTxt");
                txt.innerHTML = str;
                document.getElementById("msgDiv").appendChild(txt);
            }
            
            function _Alert(str, param){
                _isAlert = 1;
                _Alert1(str, param);
                while (_isAlert) {
                }
                //在这里加上要做的处理       
                alert("我自己的处理!");
            }
            
            function callAlert(str, param){
                _Alert(str, param);
                alert(0);
            }
            
            function myAlert(str, param){
                Concurrent.Thread.create(_Alert, str, param);
            }
        </script>
        </HEAD>
        <BODY>
            <input type="button" value="点击这里" onclick="myAlert('测试效果 <br>Javascript 多线程编程;')"/>
            <br/>
            <input type="button" value="点击这里" onclick="myAlert('测试效果 <br>Javascript 多线程编程;')"/>
            <br/>
            <input type="button" value="点击这里" onclick="myAlert('测试效果 <br>Javascript 多线程编程;')"/>
            <br/>
        </BODY>
    </html>