I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension.
You can view an example of what I have achieved so far: here
Currently, I have an image at the center and when hovered over and clicked, the intention is for the Three.js scene to appear in a modal window.
However, upon testing, when I click on the image, things don't turn out as expected (the scene window appears at the top-left corner, overlapping with the image ...)
To explain my approach, here's the JavaScript source code link:
When a user hovers over the image and clicks it (imageElement DOM), the following code snippet is executed (based on a standard jQuery modal window implementation):
imageElement.onclick = function RaiseWindow() {
var popID = 'canvas'; // Identify the pop-up
var popWidth = 700; // Set width
// Display the pop-up and add a closing button
$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="../close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
// Calculate margin to center the window - adjust by 80px
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
// Apply Margin Styles to the Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Show background
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'contrast(0.3)'}).fadeIn();
return false;
};
The container (div) with id canvas is obtained using the following:
// Div container for canvas
container = document.getElementById('canvas');
container.style.display = 'none';
// Initialize 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);
Initially, I set
container.style.display = 'none';In the HTML source, I have added the following:
<td class="body_content"><br>
<!-- WebGL into td body_content -->
<div id="canvas" class="center"></div>
<!-- Javascript -->
<script src="js/sphere_dev.js"></script>
</td>
Currently, the modal window does not appear when clicked, and the reason escapes me. After resolving this issue, I may need to remove
container.style.display = 'none';How can I first display the modal window followed by the Three.js scene inside it?
Update 1
Progress has been made. I have managed to grey out the entire window, but the popup remains invisible.
In the HTML code, I have included the following:
<!-- WebGL into td body_content -->
<div id="canvas" data-width="500" data-rel="popup_webgl" class="center"></div>
<!-- HTML content of popup_webgl -->
<div id="popup_webgl" class="popup_block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod efficitur est, eget vehicula leo volutpat ac. Nullam finibus purus nec orci consectetur, et varius urna fermentum. </p>
</div>
<!-- Javascript -->
<script src="js/sphere_dev.js"></script>
In the sphere_dev.js file, I have implemented the following logic:
imageElement.onclick = function RaiseWindow() {
var popID = $(this).data('rel'); // Retrieve pop-up ID
var popWidth = $(this).data('width'); // Get width
// Make the popup visible and add a close button
$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
// Calculate margins for centering
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
// Apply Margins to the Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Show background
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
return false;
};
//Close Popups and Fade Layer
$('body').on('click', 'a.close, #fade', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
You can view the updated version at this link.
Despite greying out the full window upon clicking, the popup itself is not visible. Why is this happening?
Update 2
After following various suggestions, I have successfully displayed the Three.js scene, albeit with a centering issue.
You can see the latest results at this link
Upon clicking the image to display the popup, the layout appears off-center (observed in Firefox and Chrome):
https://i.stack.imgur.com/cIKqO.jpg
The problem lies in the misalignment of the popup (slightly shifted horizontally and vertically off-center, with the bottom portion missing).
In an attempt to correct this, I have utilized the following calculations (where mainWidth and mainHeight are global variables):
// Maintain proportions for popup (from image dimensions: width=900, height=490)
// Set popup width to 90% of available width and calculate height accordingly:
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);
console.log('print x = ', xPop);
console.log('print y = ', yPop);
// Make the popup visible and add a closing button
$('#' + popID).fadeIn().css({'position': 'fixed', 'width': popWidth+'px', 'height': popHeight+'px', 'top': xPop+'px', 'left': yPop+'px'}).prepend('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
// Display the background
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
return false;
};
Please note that the window.offsetHeight function didn't work on Firefox and Chrome, requiring the use of window.innerHeight instead.
Below is the CSS styling applied to the popup:
.popup_block{
display: none; /* hidden by default */
background: #fff;
padding: 20px;
border: 20px solid #ddd;
font-size: 1.2em;
position: fixed;
z-index: 99999;
/*--CSS3 Shadow Definitions--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
You can access the complete CSS code at this link.
How can I resolve the centering issue with the popup?