title: Open CSS3 / HTML5 modal dialog relative to mouse position
body: <p>I created a modal dialog using CSS3, it works perfectly. But my site is responsive and the modal has to appear on several items inside an iframe (see here: <a href="http://labs.tageswoche.ch/interaktives/filmPortraits/" rel="nofollow">http://labs.tageswoche.ch/interaktives/filmPortraits/</a> and here: <a href="http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm" rel="nofollow">http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm</a>). In the iframe it doesnt work, but it works as expected on the real site.</p>
  
  <p>The modal dialog is implemented on the first two pictures.</p>
  
  <p>And here the code:</p>
  
  <pre><code>.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity:0;
  -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 &gt; div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
  }
  .close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
  }
  .close:hover {
  background: #00d9ff;
  }
  </code></pre>
  
  <p>Here is a jsfiddle I used to implement the modal dialog: </p>
  
  <p><a href="http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/" rel="nofollow">http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/</a></p>
  
  <p>What i want to achieve is that the modal appears where the mouse click was (or more or less) so that also on mobile devices on the last images of the wall. Right now the modal appears on top. How can I implement this? I have no clue.</p>