-1

I have a website where im using modal windows on pop ups.

http://dev.ikov.org/

If you click on the trailer image on the side, the modal pops up. However, if i want it to close i have to click the link in the modal.

How can i make it so that the modal can disappear when i click on the black overlay? Please help.

.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;
}

and here is the 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>

Here is my Javascript (which has nothing to do with how the modal functions, it's only to change the style of some other divs):

    <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>
msafi
  • 377
  • 1
  • 5
  • 19

2 Answers2

0

Have you tried attaching the same onclick JS handler function to the overlay div element you currently have attached to the a#close anchor?

Brian Bolli
  • 1,873
  • 1
  • 12
  • 14
  • the onclick function that i have connected to it doesnt have anything to do with the modal window – msafi Feb 28 '14 at 02:14
  • So the returnIndex() function doesn't "close" the modal window? It would help if you updated your question with any JS code bring used. My thought is whatever code is currently closing the modal window when you click "Click here to close" should also work if attached as an onclick event listener to the overlay doc element. – Brian Bolli Feb 28 '14 at 02:22
0

I think you can add onclick="location.href='#close'" to any element and clicking it will close the lightbox.

However because of javascript event bubbling that element shouldn't contain other elements, where you might want to click (because it will also close the lightbox).

So you can add an element before modalDialog, add the onclick property, and give it this css: position: absolute; top:0; right:0; bottom:0; left:0;

Albin
  • 2,410
  • 2
  • 29
  • 27