asp.net怎么做一个弹出DIV啊？要兼容浏览器的

Question

asp.net怎么做一个弹出DIV啊？要兼容浏览器的  最好提供源码。或者加小弟QQ806778705
类似上面这个图片这样的效果jquery我知道可以实现但是不会写啊，我JS比较查。最好提供详细点的代码给我，谢谢

Answer 1

HTML <!--浮动层-->
        <div onmouseup="up()" onmousedown="down(event,'openid')" style="position: absolute;
            background-color: White; border: 3px solid #B8D3F1; left: 250px; top: 100px;
            width: 350px; overflow: auto; display: none;" id="openid">
            <div style="float: right; color: white; padding: 3px; cursor: pointer" id="overid"
                onclick="closewin()">
                <img src='Images/remove.png' style='height: 12px; width: 12px; bgcolor: #FFFFFF'
                    alt='关闭' /></div>
            <div style="padding: 7px 0px 5px 7px;">
                <table border="0" cellpadding="5" cellspacing="0">
                    <tr>
                        <td>
                            角色名称：
                        </td>
                        <td>
                            <input type="text" value="" name="purname" runat="server" id="purname" />
                            <span id="msg" style="color: red;"></span>&nbsp;&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            角色权限：
                        </td>
                        <td style="text-align: left; width: 240px">
                            <input type="checkbox" id="c1" name="c1" runat="server" value="系统设置" />
                            系统设置
                            <input type="checkbox" id="c2" name="c2" runat="server" value="文章系统" />文章系统
                            <input type="checkbox" id="c3" name="c3" runat="server" value="相册管理" />相册管理
                            <input type="checkbox" id="c4" name="c4" runat="server" value="商品管理" />商品管理
                            <input type="checkbox" id="c5" name="c5" runat="server" value="会员管理" />会员管理
                            <input type="checkbox" id="c6" name="c6" runat="server" value="扩展应用" />扩展应用
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="text-align: center">
                                <asp:Button ID="Button1" runat="server" Text="提交" OnClick="Service_Click" OnClientClick="return check();" /></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>Jquery<script type="text/javascript">
        var posX;
        var posY;
        var popDiv;
        var dragable;
        //鼠标按下事件
        function down(e, openid) {
            popDiv = document.getElementById(openid);
            popDiv.style.cursor = "move";
            e = e || window.event; //如果是IE  活着  
            posX = e.clientX - parseInt(popDiv.style.left);
            posY = e.clientY - parseInt(popDiv.style.top);
            dragable = true;
            document.onmousemove = move;
        }
        //鼠标移动事件
        function move(ev) {
            if (dragable == true) {
                ev = ev || window.event; //如果是IE   
                popDiv.style.left = (ev.clientX - posX) + "px";
                popDiv.style.top = (ev.clientY - posY) + "px";
            }
        }
        //鼠标抬起事件
        function up() {
            dragable = false;
            popDiv.style.cursor = "default";
        }
        //打开浮动层
        function updatepriview(purname, purid) {            $("#openid").show(300);
            //层的级别最高
            $("#openid").css("z-index", "2");
            HoutDiv(); //调用遮罩层
            $("#purname").val(purname);
            $("input[name='prouid']").val(purid);
            //添加操作进行追加多选框 双参数表示为修改
            if ((purid != "" && purid != undefined) && (purname != "" && purname != undefined)) {                $.get("../../UI/admin/ajaxpage.ashx", "roleid=" + purid + "&act=false", function(msg) {                    var data = msg.purviewlist;
                    var purlist = $("td input[type='checkbox']");
                    $.each(data, function(i, n) {
                        $.each(purlist, function(i, en) {
                            if (purlist[i].value == n.purname) {                                purlist[i].checked = true;
                            }                        });
                    });                }, "json");
            }        }        //关闭方法
        function closewin() {
            //关闭层和清除文本参数
            $("#openid").hide(300);
            $("#shutid").hide(500);
            $("#purname").val("");
            $("#prouid").val("");
            var purlist = $("td input[type='checkbox']"); //关闭所有选项
            $.each(purlist, function(i, en) {
                purlist[i].checked = false;
            });        }
        //创建模态层
        function HoutDiv() {            //先要移除模态层
            $("#shutid").remove();
            //创建模态层添加属性  
            var div = document.createElement("div");
            div.setAttribute("id", "shutid");
            document.body.appendChild(div);
            $("#shutid").css({ position: "absolute", left: "0px", top: "0px", background: "#CCCCCC" });
            document.getElementById("shutid").style.filter = "Alpha(opacity=60)";
            document.getElementById("shutid").style.opacity = "0.6";
            //添加模态层宽高
            $("#shutid").css("width", $(document).width());
            $("#shutid").css("height", $(document).height());
            //层的级别
            $("#shutid").css("z-index", "1");        }        //检查表单
        function check() {
            var rolename = $("#purname").val();            if (rolename == "") {
                $("#msg").fadeIn(3000, function() {
                    $("#msg").html("*");
                    $("#msg").fadeOut("slow");
                });
                return false;
            }
            else {
                return true;
            }
        }
        }
    </script>

Answer 2

http://topic.csdn.net/u/20101206/14/f3e1f699-8a3f-41e9-a1c0-8653b8ab2c6c.html里面有你的东西

Answer 3

这个可以满足，
http://www.qianduan.net/top-10-jquery-lightbox-scripts.html

Answer 4

用这二个：
    <script src="scripts/jquery.alerts.js" type="text/javascript"></script>
    <script src="scripts/jquery-impromptu.3.1.js" type="text/javascript"></script>
代码：
    //修改密码
    $("#Bmodipwd").click(function() {
        var txt = "旧密码:<input type=\"password\" name=\"oldpwd\"><br />新密码:<input type=\"password\" name=\"newpwd\"><br />新密码:<input type=\"password\" name=\"newpwd2\">";
        $.prompt(txt, { buttons: { OK: true, Cancel: false }, callback: function(v, m, f) {
            if (v != true) return;
            if (f.newpwd != f.newpwd2) { jAlert("二次输入的密码不一致", "修改密码"); return; }
            $.post("ajax/modipwd.aspx", { userid: itemscore.userID, oldpwd: f.oldpwd, newpwd: f.newpwd }, function(retval) {
                if (retval == "true") jAlert("修改密码成功", "修改密码");
                else jAlert("修改失败", "修改密码");
            });
        }
        });
    });

Answer 5

用Ajax里的这个PopuControlExtender控件也可以实现，很简单