title: Set Three.js scene into a Jquery modal window
body: <p>I try to insert a Three.js scene into a Jquery modal window. The goal is to use the Three.js scene with bigger dimensions, i.e in a bigger window.
  This scene is expected to appear after clicking on an image which represents the scene but with a smaller dimension.</p>
  
  <p>Right now, you can see an example of what I have managed to do: [on this link][1] </p>
  
  <p>As you can see, I have a centered image and if a mouse is over it and click it, the expected result is to have the Three.js scene into a modal window.</p>
  
  <p>But, as you can test it, if I click, things are totally wrong (a scene window appears at the top-left, in addition to the image ...) </p>
  
  <p>I explain what I did (see Javascript source [HERE][2]) :</p>
  
  <p>When user is over image and click it (<code>imageElement</code> DOM), I call the following part of code (which is inspired from a standard Jquery modal window code) :</p>
  
  <pre><code>imageElement.onclick = function RaiseWindow() {                                          
  
        var popID = 'canvas'; // Find the pop-up                                           
        var popWidth = 700; // Width                                                  
  
        // Make appear pop-up and add closing button
        $('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('&lt;a href="#" class="close"&gt;&lt;img src="../close_pop.png" class="btn_close" title="Close Window" alt="Close" /&gt;&lt;/a&gt;');                                                                                        
  
        // Get margin to center window - adjust with 80px                                  
        var popMargTop = ($('#' + popID).height() + 80) / 2;                               
        var popMargLeft = ($('#' + popID).width() + 80) / 2;                               
  
        // Apply Margin to Popup                                                           
        $('#' + popID).css({                                                               
          'margin-top' : -popMargTop,                                                      
          'margin-left' : -popMargLeft                                                     
          });                                                                              
  
        // Display background                                                              
        $('body').append('&lt;div id="fade"&gt;&lt;/div&gt;');                                         
        $('#fade').css({'filter' : 'contrast(0.3)'}).fadeIn();                             
  
        return false;                                                                      
      };                     
  </code></pre>
  
  <p>the container (div) for <code>id canvas</code> is got by doing :</p>
  
  <pre><code>// Div container for canvas                                                              
  container = document.getElementById('canvas');                                                                                                     
  container.style.display = 'none';                                                                   
  
  // Initiate WebGLRenderer renderer                                                       
  renderer = new THREE.WebGLRenderer({ antialias: true });                                                                                         
  renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);                                           
  renderer.sortObjects = true;                                                             
  // AppendChild renderer to container                             
  container.appendChild(renderer.domElement);                                              
  </code></pre>
  
  <p>Initially, I did <code>container.style.display = 'none';</code> because otherwise, the scene is drawn whereas I have not clicked on the image.</p>
  
  <p>In HTML source, I have done :</p>
  
  <pre><code>&lt;td class="body_content"&gt;&lt;br&gt;
      &lt;!-- WebGL into td body_content --&gt;
      &lt;div id="canvas" class="center"&gt;&lt;/div&gt;
      &lt;!-- Javascript --&gt;                                                                  
      &lt;script src="js/sphere_dev.js"&gt;&lt;/script&gt;                                                                                     
  &lt;/td&gt;
  </code></pre>
  
  <p>Currently, the modal window is not displayed when I click and I don't understand why. Then, after this first issue, Surely I will have to remove <code>container.style.display = 'none';</code> but I can't do this firstly (Three.js will appear and the image too).</p>
  
  <p>If someone could give clues to me for displaying firstly the modal window and after the Three.js scene into this window.</p>
  
  <p>Feel free to ask me more details if necessary.</p>
  
  <p>Thanks for your help.</p>
  
  <p><strong>UPDATE 1 :</strong></p>
  
  <p>I have progressed. I manage to grey full window but the popup is not displayed.</p>
  
  <p>In the HTML code, I did :</p>
  
  <pre><code>    &lt;!-- WebGL into td body_content --&gt;
      &lt;div id="canvas" data-width="500" data-rel="popup_webgl" class="center"&gt;&lt;/div&gt;
      &lt;!-- HTML content of popup_webgl --&gt;
      &lt;div id="popup_webgl" class="popup_block"&gt;
      &lt;p&gt;Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. &lt;/p&gt;
      &lt;/div&gt;
      &lt;!-- Javascript --&gt;
      &lt;script src="js/sphere_dev.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Into sphere_dev.js code, Here what I did (at the beginning, I get back <code>rel</code> and <code>width</code> variables, and after I use <code>fadeIn</code>) :</p>
  
  <pre><code>imageElement.onclick = function RaiseWindow() {
  
      var popID = $(this).data('rel'); // Get name of pop-up
      var popWidth = $(this).data('width'); // Get width
  
      // Make appear pop-up and add closing button
      $('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('&lt;a href="#" class="close"&gt;&lt;img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /&gt;&lt;/a&gt;');
  
      // Get margin to center window - adjust with 80px
      var popMargTop = ($('#' + popID).height() + 80) / 2;
      var popMargLeft = ($('#' + popID).width() + 80) / 2;
  
      // Apply Margin to Popup
      $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
        });
  
      // Display background
      $('body').append('&lt;div id="fade"&gt;&lt;/div&gt;');
      $('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
  
      return false;
  };
  
  //Close Popups and Fade Layer
  $('body').on('click', 'a.close, #fade', function() { // When click body
      $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();
        }); // They disappear
  
      return false;
      });
  </code></pre>
  
  <p>You can check the last results on [this link][3].</p>
  
  <p>If someone could see why popup is not displayed even if full window is grey after clicking.</p>
  
  <p>Regards</p>
  
  <p><strong>UPDATE 2 :</strong></p>
  
  <p>Following the different answers, I can get to display the Three.js scene but an issue of centering is occuring.</p>
  
  <p>You can check the last results on [this link][4]</p>
  
  <p>As you can see, if you click on image to display popup, you get this (on Firefox and Chrome) :</p>
  
  <p><a href="https://i.stack.imgur.com/cIKqO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cIKqO.jpg" alt="Capture of popup"></a></p>
  
  <p>The issue is that popup is not centered (slighty shifted horizontally to the right and vertical margin on top too high, and finally bottom of popup not visible).</p>
  
  <p>I tried to center it by doing (<code>mainWidth</code> and <code>mainHeight</code> are global variables) :</p>
  
  <pre><code>// Keep good proportions for popup (from image (width=900, height=490))
  // For popup, set 90% of available width and compute height from this value :
  var mainWidth = 0.9*window.innerWidth,
      mainHeight = mainWidth*(490/900);
  
  
  imageElement.onclick = function RaiseWindow() {
  
      var popWidth = mainWidth;
      var popHeight = mainHeight;
      var xPop = (window.innerWidth/2) - (popWidth/2);
      var yPop = (window.innerHeight/2) - (popHeight/2);    
  
      console.log('print popWidth = ', popWidth);
      console.log('print popHeight = ', popHeight);
  
      // window.offsetHeight not working
      //console.log('window.offsetHeight = ', window.offsetHeight);
  
      console.log('print x = ', xPop);
      console.log('print y = ', yPop);
  
      // Make appear pop-up and add closing button
      $('#' + popID).fadeIn().css({'position': 'fixed', 'width': popWidth+'px', 'height': popHeight+'px', 'top': xPop+'px', 'left': yPop+'px'}).prepend('&lt;a href="#" class="close"&gt;&lt;img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /&gt;&lt;/a&gt;');
  
      // Display background
      $('body').append('&lt;div id="fade"&gt;&lt;/div&gt;');
      // Working only for background
      $('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
  
      return false;
  };
  </code></pre>
  
  <p>I have to make you notice that function <code>window.offsetHeight</code> doesn't work on Firefox and Chrome, instead of this, I have to use <code>window.innerHeight</code>.</p>
  
  <p>Here's the CSS I used for this popup :</p>
  
  <pre><code>.popup_block{
  display: none; /* masked by default */
  background: #fff;
  padding: 20px;
  border: 20px solid #ddd;
  font-size: 1.2em;
  position: fixed;
  z-index: 99999;
  /*--Les différentes définitions de Box Shadow en CSS3--*/
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
  /*--Coins arrondis en CSS3--*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  }
  </code></pre>
  
  <p>The entire CSS is available on [this link][6].</p>
  
  <p>If someone could help me to fix this issue of centering.</p>
  
  <p>Regards</p>