-1

ポップアップでモーダル ウィンドウを使用している Web サイトがあります。

http://dev.ikov.org/

横の予告編画像をクリックすると、モーダルがポップアップします。ただし、閉じたい場合は、モーダルのリンクをクリックする必要があります。

黒いオーバーレイをクリックするとモーダルが消えるようにするにはどうすればよいですか? 助けてください。

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    z-index: 9999!important;
    opacity:0;
    float: left;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 672px;
    position: fixed;
    margin: 10% auto;
    background: #fff;
    z-index: 2500!important;
}

ここにhtmlがあります：

<div id="vid">
  <a href="#openModal" onClick="changeIndex()">
  <div id="vidoverlay"></div>
  <img src="imgs/vidthumb.png" /></a>
</div>
<div id="openModal" class="modalDialog">
    <div id="contentbox2">
         <div id="lightbg2">
         <a href="#close" title="Close" class="close" onclick="returnIndex()">Click here to close!</a>
             <div id="contentheader2">Ikov RSPS Trailer</div>
         <div id="textarea2">
         <div id="video"><iframe width="640" height="360" src="//www.youtube.com/embed/LeLqQ9WWDxk?wmode=transparent" frameborder="0"  wmode="Opaque" allowfullscreen></iframe></div>
          </div>
      </div>
  </div>
</div>

これが私のJavascriptです（モーダルの機能とは関係ありません。他のdivのスタイルを変更するだけです）：

    <script type="text/javascript">
function changeIndex() {
    document.getElementById('header').style.zIndex='-3'
    document.getElementById('footer').style.zIndex='-3'
    document.getElementById('video').style.zIndex='100'
}
function returnIndex() {
    document.getElementById('header').style.zIndex='5'
    document.getElementById('footer').style.zIndex='5'
    document.getElementById('video').style.zIndex='-100'
}
</script>
4

2 に答える 2

0

任意の要素に追加できると思いますonclick="location.href='#close'"。クリックするとライトボックスが閉じます。

ただし、javascript イベント バブリングのため、その要素には、クリックする可能性のある他の要素を含めることはできません (ライトボックスも閉じるため)。

したがって、modalDialog の前に要素を追加し、onclick プロパティを追加して、次の css を指定できます。position: absolute; top:0; right:0; bottom:0; left:0;

于 2014-02-28T02:22:16.053 に答える