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

2010-12-13 04:27:44 323 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

(精)在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口我们经常要在程序的人机交互中用到弹出(模态)窗口,但在B/S开发中,这一点就非常不容易了, 虽然我们可以用window.showModalDialog,或者 window.open 这类型的脚本函数实现,但是,非常不好用,一方面涉及回传值,另一方面不能够很好的实现父页面与子页面的交互,一般只能通过在脚本中实现,方可交互,而且使用这种方式,会产生多个页面,对用户操作不友好. 基于阅读详情

asp.net怎么做一个弹出DIV啊？要兼容浏览器的最好提供源码。或者加小弟QQ806778705

类似上面这个图片这样的效果

jquery我知道可以实现但是不会写啊，我JS比较查。最好提供详细点的代码给我，谢谢

...全文

ASP.NET&Javascript实现半透明背景&模式弹出个性化页面实例开发Web应用时，经常会有弹出模式对话框的情况，可以直接调用window.showModalDialog()方法，一般情况就可以了。但有一些应用场景，需要我们弹出一些自定义控件或页面，同时用一层半透明的背景将页面的其他地方遮住，以防止用户的其他操作，以达到一种“模式窗口”的效果，这里给出一个实现此类效果，同时支持弹出自定义控件页面中通过委托更新主页面的操作功能，当然阅读详情

gdmvip

.NET社区 62,272 成员 668,968 内容

+ 关注 + 加入社区

切换为时间正序

Nihn 2010-12-17

打赏
举报

收藏。

__还是少年 2010-12-13

打赏
举报

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

lpfjinxinjinli 2010-12-13

打赏
举报

[Quote=引用 4 楼 anbin0814 的回复:]
http://topic.csdn.net/u/20101206/14/f3e1f699-8a3f-41e9-a1c0-8653b8ab2c6c.html

里面有你的东西
[/Quote]

这个不兼容火狐

pclion 2010-12-13

打赏
举报

用这二个：
<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("修改失败", "修改密码");
});
}
});
});

net5354 2010-12-13

打赏
举报

我也不会

hurui198802 2010-12-13

打赏
举报

这个有直接写好的效果的,你可以去阿里西西下个,也可以加我QQ我给你304727336

jiaweihan_001 2010-12-13

打赏
举报

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

在路上20130607 2010-12-13

打赏
举报

等着接分·····

anbin0814 2010-12-13

打赏
举报

http://topic.csdn.net/u/20101206/14/f3e1f699-8a3f-41e9-a1c0-8653b8ab2c6c.html

里面有你的东西

ycproc 2010-12-13

打赏
举报

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>  

                        </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>

在路上20130607 2010-12-13

打赏
举报

加你QQ 也不回 ·········

在路上20130607 2010-12-13

打赏
举报

带源码的我给··········

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

相关推荐