1

リンクがクリックされたときに小さなポップアップボックスを開く次のきちんとしたコードがあります...問題は、多くのコンテンツを含む非常に長いページでそれを使用し、誰かがポップアップを開くたびに、実際のコンテンツページがジャンプバックすることですこれは、誰かが下にスクロールするのにしばらく費やした場合に迷惑です。ポップアップウィンドウが開いたり閉じたりしても、ページを強制的にそこに残すにはどうすればよいですか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <script type="text/javascript">
            function showPopUp(el) {
                var cvr = document.getElementById("cover")
                var dlg = document.getElementById(el)
                cvr.style.display = "block"
                dlg.style.display = "block"
                if (document.body.style.overflow = "hidden") {
                    cvr.style.width = "1024"
                    cvr.style.height = "100%"
                }
            }
            function closePopUp(el) {
                var cvr = document.getElementById("cover")
                var dlg = document.getElementById(el)
                cvr.style.display = "none"
                dlg.style.display = "none"
                document.body.style.overflowY = "scroll"
            }
        </script>
        <style type="text/css">
            #cover {
                display:none;
                position:absolute;
                left:0px;
                top:0px;
                width:100%;
                height:100%;
                background:gray;
                filter:alpha(Opacity=50);
                opacity:0.5;
                -moz-opacity:0.5;
                -khtml-opacity:0.5
            }
            #dialog {
                display:none;
                position:absolute;
                top:50%;
                left:50%;
                width:400px;  /* adjust as per your needs */
                height:400px;   /* adjust as per your needs */
                margin-left:-200px;   /* negative half of width above */
                margin-top:-200px;   /* negative half of height above */
                z-index:100;
                background:white;
                padding:2px;
                font:10pt tahoma;
                border:1px solid gray
            }
        </style>
    </head>
    <body>
        <div id="cover"></div>
        <div id="dialog">
            My Dialog Content
            <br><input type="text">
            <br><input type="button" value="Submit">
            <br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
        </div>
        <a href="#" onclick="showPopUp('dialog');">Show</a>   
    </body>
</html>
4

4 に答える 4

2

このコードを変更します。

from <a href="#" onclick="closePopUp('dialog');">[Close]</a>

に

<a href="javascript:void(0)" onclick="closePopUp('dialog');">[Close]</a>

また:

<a href="#" onclick="showPopUp('dialog');">Show</a>

に：

<a href="javascript:void(0)" onclick="showPopUp('dialog');">Show</a>

それを試してみてください。

于 2012-06-13T22:25:55.553 に答える
0

これを変更してみてください

<a href="#" onclick="closePopUp('dialog');">[Close]</a>

に

<a onclick="closePopUp('dialog');">[Close]</a>

この

<a href="#" onclick="showPopUp('dialog');">Show</a>

に

<a onclick="showPopUp('dialog');">Show</a>
于 2013-05-14T14:20:25.937 に答える
-1

position:absolute の代わりに position:fixed を使用してみてください。詳細については、http ://www.w3schools.com/Css/css_positioning.asp を参照してください。

于 2012-06-13T22:24:22.500 に答える