1

私が間違っていることは何ですか？クラス divtop をクリックすると、ページの中央に div ポップアップが表示されます。その時点で、バックページはクリックできなくなるはずです。エスケープまたはポップアップのボタンで閉じます。

<html lang="en" class=" en">
<head>
    <title>My Test Popup</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <style type="text/css">
        .divtop
        {
            width: 800px; 
            height: 300px; 
            border:solid;
        }

        .divbottom
        {
            top: 400px; 
        }

        .localmenu {
            border: 1px solid black;
            background: #fff;
            margin-left : auto;
            top: 50px; width: 300px; 
            padding-top: 25px; 
            margin-top: 100px; 
            height: 150px;
        }

        .appContent{
            width: 800px; 
            border:solid;
            height: 600px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .maincontent{
            width: 100%;
        }

    </style>

</head>
<body>
    <div class="appContent" >
        <div class="maincontent" >
            <div class="divtop" >Top</div>
            <div class="divtop divbottom"  >Bottom</div>
        </div>
        <div id="popup" style="width : 100%; height: 600px;display: none;">
            <div class='localmenu'>
                Text in Div Popup<br/>                        
                <button id="btnHide">Close</button><br/>
            </div>
        </div>
    </div>

    <script>

        $(document).ready(function() {
            $('.divtop').click(function() {
                $('#popup').show().css("top", "500px").animate({top: 50}, 200);
                $('.mainContent').css("background-color", "grey");
            });

            $('#btnHide').click(function() {
                $('#popup').hide();
            });

        });

    </script>

</body>
</html>
4

4 に答える 4

2

フィドル

#popup にいくつかの CSS を追加したところ、すべてが CSS に含まれるようになりました (html のインラインではありません)。jQuery animate も 50 ではなく 50px に変更しました。CSS を少し調整する必要があると思い.localmenuますpadding-top: 25px; margin-top: 100px;。

CSS

#popup {
    position:absolute;
    display: none;
    float: left;
    left:30%;
    z-index:1;
}
#popoverlay {
    position: fixed;
    display:none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

jQuery

$(document).ready(function () {
    $('.divtop').click(function () {
        $('#popoverlay').show();
        $('#popup').show().css("top", "500px").animate({
            top: "50px"
        }, 200);
        $('.mainContent').css("background-color", "grey");
    });

    $('#btnHide').click(function () {
        $('#popup').hide();
        $('#popoverlay').hide();
    });

});

HTML

<div class="appContent">
    <div class="maincontent">
        <div class="divtop">Top</div>
        <div class="divtop divbottom">Bottom</div>
    </div>
    <div id="popup">
        <div class='localmenu'>Text in Div Popup
            <br/>
            <button id="btnHide">Close</button>
            <br/>
        </div>
    </div>
</div>
于 2013-07-06T14:32:51.033 に答える
1

垂直スクロールバーがあっても正しく動作させるには、位置を「固定」する必要があります。popupの直接の子として配置し、bodyそれをposition: fixed, and widthand height100% にします。localmenu同様の直接の子として配置bodyします。jsbinの作業例。

HTML:

<div id="popup">
  <!--// This is to stop the user from interacting with the content in the back
      // and to give a visual clue about that
  -->
</div>
<div class='localmenu'>
  <div>
    Text in Div Popup<br/>                        
    <button id="btnHide">Close</button><br/>
  </div>
</div>

<div class="appContent" >
  <div class="maincontent" >
    <div class="divtop" >Top</div>
    <div class="divtop divbottom"  >Bottom</div>
  </div>
</div>

CSS:

  //Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
  #popup {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    background: black;
    opacity: .5;
    top: 0;
    left: 0;
  }

  //This is just to be able to center the actual menu
    .localmenu {
        top: 20%;
        left: 0;
        width: 100%;
        position: fixed;
        height: 150px;
        display: none;
    }

  .localmenu > div {
        border: 1px solid blue;
        background: #fff;
        margin-left : auto;
        margin-right: auto;
        width: 300px;
        height: 150px;
  }

Javascript: (アニメーションを削除しましたが、これはほとんど同じです。アニメーションがどのように機能するのか正確にはわからず、 で終了する必要があるため'top: 0'です。 localmenu と popup は別々であるため、それらも別々に示します。)

    $(document).ready(function() {
        $('.divtop').click(function() {
            $('#popup').show().animate(200);
            $('.localmenu').show();
            //$('.mainContent').css("background-color", "grey");
        });

        $('#btnHide').click(function() {
            $('#popup').hide();
            $('.localmenu').hide();
        });

    });
于 2013-07-06T14:47:46.703 に答える