js弹出层位置问题，希望高手帮忙改一下代码

代码如下：
<div id="link" style="color: Blue">
        收信人:</div>

<div id="divPop4" style="background-color: White; overflow:auto; border: solid 1px #000000; position:absolute;
    display: none; width:180px; height:300px; outline-style:outset; outline-width:thick">
    <div style="text-align: center; color:Black">
        通讯录</div>
    <div id="treepanel" style=" font-size:xx-large">
    </div>
    <div style=" font-size:larger">
    <table style=" width:180px; bottom:0px">
    <tr>
        <td align="center">
        <button id="btnShow4">
            确定</button></td>
            <td align="center">
        <button id="showchecked">
            取消</button>
            </td></tr></table>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var speed = 500;
        //绑定事件处理
        $("#link").click(function (event) {
            //取消事件冒泡
            event.stopPropagation();
            //设置弹出层位置
            var offset = $(event.target).offset();
            $("#divPop4").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });

            //切换弹出层的显示状态
            $("#divPop4").slideDown(500);
        });
    });
    //确定
    $("#btnShow4").click(function (event) {
        var s = $("#treepanel").getTSVs();
        $("#sendto").text(s.join(";"));
        $("#divPop4").toggle(500);
    });
    //取消
    $("#showchecked").click(function (e) {
        $("#divPop4").toggle(500);
    });
</script>

如何设置可以使得弹出层的位置位于浏览器中间？最好可以设置成qq邮箱点击收信人时弹出的弹出框一样，请高手帮我改一下代码。我用的是mvc3页面，页面没有<body>之类的标签

14 个解决方案

#1

Body 标记在 Views\Shared\_Layout.cshtml 里面。

#2

该回复于2011-05-11 10:00:31被版主删除

#3

你设置div层相对left多少 top多少就OK了

#4

id="divPop4" 里面的style加上margin="0 auto" 试试

#5

引用 4 楼 kongwei521 的回复:

id="divPop4" 里面的style加上margin="0 auto" 试试

没效果

#6

引用 3 楼 longlong881129 的回复:

你设置div层相对left多少 top多少就OK了

这样的话浏览器大小改变后弹出层就变得不好看了

#7

$("#divPop4").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
改成
$("#divPop4").show().css("top",($(document).height()-200)/2 ).css("left",($(document).width()-400)/2 );
} );
看看

#8

oh css

#9

#10

<!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 runat="server">

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">

    

    

    </script>

</head>

<body>

    <form id="form1" runat="server">

   <div id="link" style="color: Blue">

  收信人:</div>  

<!-- 弹出层 -->

<div id="divPop4" style="background-color: White; overflow:auto; border: solid 1px #000000; position:absolute;

  display: none; width:180px; height:300px; outline-style:outset; outline-width:thick;  ">

  <div style="text-align: center; color:Black">

  通讯录</div>

  <div id="treepanel" style=" font-size:xx-large">

  </div>

  <div style=" font-size:larger">

  <table style=" width:180px; bottom:0px">  

  <tr>

  <td align="center">

  <button id="btnShow4">

  确定</button></td>

  <td align="center">

  <button id="showchecked">

  取消</button>

  </td></tr></table>

  </div>

</div>

<script type="text/javascript">

    $(document).ready(function () {

        var speed = 500;

        //绑定事件处理

        $("#link").click(function (event) {

            //取消事件冒泡

            event.stopPropagation();

            //设置弹出层位置

            var offset = $(event.target).offset();

           // $("#divPop4").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });

              $("#divPop4").show().css("top",($(document).height()-200)/2 ).css("left",($(document).width()-180)/2 );

           //切换弹出层的显示状态

            $("#divPop4").slideDown(500);

        });

    });

    //确定

    $("#btnShow4").click(function (event) {

        var s = $("#treepanel").getTSVs();

        $("#sendto").text(s.join(";"));

        $("#divPop4").toggle(500);

    });

    //取消

    $("#showchecked").click(function (e) {

        $("#divPop4").toggle(500);

    });

</script>



    </form>

</body>

</html>

#11

引用 9 楼 kongwei521 的回复:

$("#divPop4").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
改成
$("#divPop4").show().css("top",($(document).height()-200)/2 ).css("left",($(document).width()-180)/2 ……

首先非常感谢你，不过可能因为我的页面不是html,照你的方法改了之后弹出框的位置偏下了，“确定”，“取消”这两个按钮都看不到（我把这两个按钮的位置该在divPop4层的底部）。
$("#divPop4").show().css("top", ($(document).height() - 400) / 2).css("left", ($(document).width() - 180) / 2);
改成这样后就差不多了，不过还是有个问题，就是首次进入界面的时候点击“收信人”的时候弹出层的位置是偏下的，“确定”按钮看不见，当在点击一次“收信人”之后就可以看得见了，这是为什么呢？
还有问题就是弹出层时怎么把页面变成不可用啊？
我页面的全部代码如下
@model MSystem.Models.Message
@{
    ViewBag.Title = "新建短信";
}
<h2>
    新建短信</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div id="link" style="color: Blue">
        收信人:</div>
    <div class="editor-field">
        <textarea name="sendto" rows="3" cols="80" id="sendto"></textarea>
    </div>

    <div class="editor-label">
        正文：
    </div>
    <div class="editor-field">
        <textarea name="context" id="context" rows="18" cols="80" onkeyup="textCounter('context',350)">@Model.Context</textarea>
        <p>
            剩余字符：<span id="remLen"></span></p>
    </div>
    <div>
    </div>

    <p>
        <input type="submit" value="发送" />
    </p>
    <script type="text/javascript" language="javascript">
        function textCounter(field, maxlimit) {
            if (document.getElementById(field).value.length > maxlimit) {
                document.getElementById(field).value = document.getElementById(field).value.substring(0, maxlimit);
            }
            else {
                var otextleft = document.getElementById("remLen");
                otextleft.innerHTML = maxlimit - document.getElementById(field).value.length;
            }
        }
    </script>
}

<script type="text/javascript" src="../../jquery/jtree/js/jquery.tree.js"></script>
<link rel="stylesheet" type="text/css" href="../../jquery/jtree/jquery.tree.css" />

<div id="divPop4" style="background-color: White;  border: solid 1px #000000; position:absolute;
    display: none; width:180px; height:300px; outline-style:outset; outline-width:thick">
    <div style="text-align: center; color:Black">
        通讯录</div>
    <div id="treepanel" style=" font-size:xx-large ; overflow:auto; height:250px">
    </div>
    <div style=" font-size:larger">
    <table style=" width:180px; bottom:0px; height:40px">
    <tr>
        <td align="center">
        <button id="btnShow4">
            确定</button></td>
            <td align="center">
        <button id="showchecked">
            取消</button>
            </td></tr></table>
    </div>
</div>
<div id="tab-container" class="x-tab-panel x-border-panel" style="left: 180px; top: 38px;">
</div>
<div id="panel-bottom">
</div>
<script src="@Url.Action("Menu")" type="text/javascript"></script>
<script type="text/javascript">
    var o = {
        showcheck: true,
        //url: "http://jscs.cloudapp.net/ControlsSample/GetChildData";
        animate: true,
        cbiconpath: "../../jquery/jtree/images/icons/", //checkbox icon的目录位置
        //icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"],
        emptyiconpath: "../../jquery/jtree/images/s.gif", //checkbxo三态的图片
        theme: "bbit-tree-lines", //bbit-tree-lines, bbit-tree-no-lines, bbit-tree-arrows
        onnodeclick: function (item) { alert(item.text); }
    };
    var op = { data: menudata };
    var o1 = { showcheck: true };
    o1.data = op.data;
    $("#treepanel").treeview(o1);
    function navi(item) {
        if (item.value) {
            $("#tab-container").opentabitem({ id: idreplace(item.id), text: item.text, url: item.value, isactive: true, closeable: true }, true);
        }
        else {
            item.expand();
        }
    }
</script>
<script type="text/javascript">
    $(document).ready(function () {
        var speed = 500;
        //绑定事件处理
        $("#link").click(function (event) {
            //取消事件冒泡
            event.stopPropagation();
            //设置弹出层位置
            var offset = $(event.target).offset();
           // $("#divPop4").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
            $("#divPop4").show().css("top", ($(document).height() - 400) / 2).css("left", ($(document).width() - 180) / 2);

            //切换弹出层的显示状态
            $("#divPop4").slideDown(500);
        });
    });
    //确定
    $("#btnShow4").click(function (event) {
        var s = $("#treepanel").getTSVs();
        $("#sendto").text(s.join(";"));
        $("#divPop4").toggle(500);
    });
    //取消
    $("#showchecked").click(function (e) {
        $("#divPop4").toggle(500);
    });
</script>
<div>
    @Html.ActionLink("返回", "Index")
</div>

#12

插件

#13

引用 12 楼 wxr0323 的回复:

插件

什么插件啊？

#14

引用 12 楼 wxr0323 的回复:

插件

你好，我想问一下如果我想调用下面fonfirm方法



<script type='text/javascript'>

    $(function () {       

        $("#confirm").click(function () {

            Boxy.confirm("请确认:", function () { alert("已经确认!"); }, { title: "提示信息" });

            return false;

        });

    });

</script>

如果我想弹出的消息是一个div层，改怎么设置呢？

#1

Body 标记在 Views\Shared\_Layout.cshtml 里面。

#2

该回复于2011-05-11 10:00:31被版主删除

#3

你设置div层相对left多少 top多少就OK了

#4

id="divPop4" 里面的style加上margin="0 auto" 试试

#5

引用 4 楼 kongwei521 的回复:

id="divPop4" 里面的style加上margin="0 auto" 试试

没效果

#6

引用 3 楼 longlong881129 的回复:

你设置div层相对left多少 top多少就OK了

这样的话浏览器大小改变后弹出层就变得不好看了

#7

#8

oh css

#9

#10

<!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 runat="server">

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">

    

    

    </script>

</head>

<body>

    <form id="form1" runat="server">

   <div id="link" style="color: Blue">

  收信人:</div>  

<!-- 弹出层 -->

<div id="divPop4" style="background-color: White; overflow:auto; border: solid 1px #000000; position:absolute;

  display: none; width:180px; height:300px; outline-style:outset; outline-width:thick;  ">

  <div style="text-align: center; color:Black">

  通讯录</div>

  <div id="treepanel" style=" font-size:xx-large">

  </div>

  <div style=" font-size:larger">

  <table style=" width:180px; bottom:0px">  

  <tr>

  <td align="center">

  <button id="btnShow4">

  确定</button></td>

  <td align="center">

  <button id="showchecked">

  取消</button>

  </td></tr></table>

  </div>

</div>

<script type="text/javascript">

    $(document).ready(function () {

        var speed = 500;

        //绑定事件处理

        $("#link").click(function (event) {

            //取消事件冒泡

            event.stopPropagation();

            //设置弹出层位置

            var offset = $(event.target).offset();

           // $("#divPop4").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });

              $("#divPop4").show().css("top",($(document).height()-200)/2 ).css("left",($(document).width()-180)/2 );

           //切换弹出层的显示状态

            $("#divPop4").slideDown(500);

        });

    });

    //确定

    $("#btnShow4").click(function (event) {

        var s = $("#treepanel").getTSVs();

        $("#sendto").text(s.join(";"));

        $("#divPop4").toggle(500);

    });

    //取消

    $("#showchecked").click(function (e) {

        $("#divPop4").toggle(500);

    });

</script>



    </form>

</body>

</html>

#11

引用 9 楼 kongwei521 的回复:

$("#divPop4").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
改成
$("#divPop4").show().css("top",($(document).height()-200)/2 ).css("left",($(document).width()-180)/2 ……

#12

插件

#13

引用 12 楼 wxr0323 的回复:

插件

什么插件啊？

#14

引用 12 楼 wxr0323 的回复:

插件

你好，我想问一下如果我想调用下面fonfirm方法



<script type='text/javascript'>

    $(function () {       

        $("#confirm").click(function () {

            Boxy.confirm("请确认:", function () { alert("已经确认!"); }, { title: "提示信息" });

            return false;

        });

    });

</script>

如果我想弹出的消息是一个div层，改怎么设置呢？

秒客网

js弹出层位置问题，希望高手帮忙改一下代码

14 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

相关文章