如何用DIV+CSS模拟JS的alert()

这里说的模拟不会只是形式上的模拟，关键是  当弹出信息后  程序会挂起，然后点击“确定”程序再继续

解决方案 »

  1.   

    估计不用JS模拟一些按钮和功能的话，不能只凭HTML + CSS实现楼主描述的功能
      

  2.   

    目前为止还没有实现这样的功能，JS本身也不具备这样的能力。你可以变通一下，写一个自定义的框，让它具有callback功能。将原来你要执行的程序分成两部分。先执行第一部分，然后弹出这个自定义弹框，等弹框关闭的时候，再 callback 第二部分。
      

  3.   


    #test{
    width:200px;
    height:100px;
    float:left;
    background:#999;
    display:none;
    }
    #yes{
    margin-left:40px;
    margin-top:50px;
    }
    #no{
    margin-left:20px;
    margin-top:50px;
    }html:<div id="test">
         <input type="button" id="yes" value="确定" />
         <input type="button" id="no" value="取消" />
    </div>jquery:$(document).ready(function(){
    $("#btn").click(function(){
          $("#test").show();
    });
    $("#yes").click(function(){
          $("#test").hide();
      alert("填入处理")
    });
    $("#no").click(function(){
          $("#test").hide();
      return;
    });
       });
      

  4.   


    <input type="button" id="btn" value="测试" />
    <div id="test">
         <input type="button" id="yes" value="确定" />
         <input type="button" id="no" value="取消" />
    </div>少写了一个
      

  5.   

    貌似自带的alert亦没有挂起吧.
      

  6.   

    <html>
    <body>
    <head>
    <script type="text/javascript">
     function showdiv()
        { 
        if(!document.getElementById('divv'))
    {
                var obj = document.createElement("div");
                obj.id="divv";
                document.body.appendChild(obj);
                //obj.style.backgroundColor='red';
    with(obj.style)
    {
    width='150px';
    height='150px';
    left = '300px';
    top = '300px';
    position = 'absolute';
    }
     obj.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='text_div' style='background: #ccc;height:100px;'>电机这里！</div>";
    }
    else
    {
               divv.removeNode(true);
    }
            
        }
    function closeAlert()
    {
    document.getElementById('divv').style.display = 'none';
    }
    </script> </head><body>
        <input type="button" value="click me" onclick="showdiv();" size="10px" /><br/>
    </body>
    </html>比较简单的一个DIV+CSS模拟层！在此基础可以修改其样式，比如添加蒙板层，设置效果等，就会更漂亮多了！没必要另外去定义ALERT（）；
      

  7.   

    JavaScript源码分析 高手群(84507704) 欢迎加入!!研究Js面向对象  jQuery Extjs