在ASP中怎样弹出像关闭Outlook时弹出的提示框一样,有三个按钮一个确定按钮一个取消按钮和一个否定按钮。

解决方案 »

  1.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>无标题页</title>
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />    <script language="javascript">   
            function locking()
            {                 
                 document.getElementById("ly").style.display="block";   
                 document.getElementById("ly").style.width=Math.max(document.body.scrollWidth, document.documentElement.clientWidth) +"px"; //设置层1宽度等于body宽度,width=100%也可以,不过有一些误差,所以最好用这个 
                 document.getElementById("ly").style.height=Math.max(document.body.scrollHeight, document.documentElement.clientHeight)+"px";  //设置层1高度满屏  
                 
                 document.getElementById("Layer2").style.display='block'; 
                 document.getElementById("Layer2").style.top = (document.documentElement.clientHeight/2 -document.getElementById ("Layer2").clientHeight/2)+"px"; //设置层2的距顶位置居中算法 
                 document.getElementById("Layer2").style.left = (document.documentElement.clientWidth/2 -document.getElementById ("Layer2").clientWidth/2)+"px";   //设置层2的距左位置居中算法         
            }   
            
            function Lock_CheckForm(theForm)
            {   
                 document.getElementById("ly").style.display='none';
                 document.getElementById("Layer2").style.display='none';
            }   
        </script>    <script type="text/javascript">
            //对“拖动点”定义:onMousedown="StartDrag()" onMouseup="StopDrag()" onMousemove="Drag()"即可
            var move=false,oldcolor,_X,_Y;
            
            function StartDrag()  //定义准备拖拽的函数
            {  
                var obj = document .getElementById ("msg_title");      
                obj.setCapture();  //对当前对象的鼠标动作进行跟踪            oldcolor=obj.style.backgroundColor;
                obj.style.background="#999";
                move=true;
                //获取鼠标相对内容层坐标
                var parentwin=document.getElementById("Layer2");
                _X=parentwin.offsetLeft-event.clientX;
                _Y=parentwin.offsetTop-event.clientY;
            }
            
            function Drag()  //定义拖拽函数
            {                   
               if(move)
                {
                    var parentwin=document.getElementById("Layer2");
                    parentwin.style.left=event.clientX+_X+"px";
                    parentwin.style.top=event.clientY+_Y+"px";
                }
            }
            
            function StopDrag()  //定义停止拖拽函数
            {   
                var obj = document .getElementById ("msg_title");
              
                obj.releaseCapture();  //停止对当前对象的鼠标跟踪        
                obj.style.background=oldcolor;
                move=false;
            }
        </script></head>
    <body>
        <form id="form1" runat="server">
        <p>
            <input type="button" value="弹出窗口" onclick="locking();"></p>
        <select id="sel">
            <option>1</option>
            <option>1</option>
            <option>1</option>
        </select>
        <!--这是要覆盖网页的层1,不必写任何东西-->
        <div id="ly">
        </div>
        <!--浮层2框架开始-->
        <div id="Layer2">
            <div id="msg_title" class="msg_title" onmousedown="StartDrag()" onmouseup="StopDrag()"
                onmousemove="Drag()">
                <a href="#" class="myfont" onclick="Lock_CheckForm(this);">[关闭]</a></div>
            <div class="msg_content">
                <p>
                    确定退出?</p>
                <p>
                    <input type="button" value="确定" />
                    <input type="button" onclick="showclose();" value="取消" /></p>
            </div>
        </div>
        <!--浮层2框架结束-->
        </form>
    </body>
    </html>
    a:link
    {
    color: #FFFFFF;
    text-decoration: none;
    }
    a:visited, a:hover, a:active
    {
    text-decoration: none;
    }
    .myfont
    {
    font-size: 12px;
    }#ly
    {
    position: absolute;
    top: 0px;
    filter: alpha(opacity=60);
    background-color: #777;
    z-index: 2;
    left: 0px;
    display: none;
    }#Layer2
    {
    position: absolute;
    z-index: 3;  /*数大代表在窗口的前端显示*/
    background-color: #fff;
    display: none;
    width: 540px;
    height: 300px;
    }.msg_title
    {
    border: 1px solid #2982BA;
    background-color: #ADDAFB;
    border-bottom: 0;
    text-align: right;
    vertical-align: bottom; 
    cursor :move; /*设置指针的移动图标,若不想移动,可以去掉此行*/

    /*与height大小一样可以垂直居中,适用于单行情况*/
    height: 25px;
    line-height: 25px;
    overflow: hidden; 
    /*与height大小一样可以垂直居中,适用于单行情况*/
    }.msg_content
    {
    border: 1px solid #2982BA;
    background-color: #E6F7FF;
    text-align: center;
    height: 275px;
    padding-top: 50px;
    }