【发布时间】：2017-08-27 05:41:01
【问题描述】：
我尝试将 Three.js 场景插入到 Jquery 模式窗口中。目标是使用更大尺寸的 Three.js 场景，即在更大的窗口中。 该场景预计会在单击代表该场景但尺寸较小的图像后出现。
现在，您可以看到我成功完成的一个示例：[在此链接上][1]
如您所见，我有一个居中的图像，如果鼠标悬停在它上面并单击它，预期的结果是让 Three.js 场景进入模态窗口。
但是，正如你可以测试的那样，如果我点击，事情就完全错误了（除了图像之外，左上角会出现一个场景窗口......）
我解释了我做了什么（参见 Javascript 源代码 [这里][2]）：
当用户在图像上并单击它 (imageElement DOM) 时，我调用以下代码部分（其灵感来自标准 Jquery 模态窗口代码）：
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('<a href="#" class="close"><img src="../close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
// 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('<div id="fade"></div>');
$('#fade').css({'filter' : 'contrast(0.3)'}).fadeIn();
return false;
};
id canvas 的容器 (div) 是通过以下方式获得的：
// 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);
最初，我使用了container.style.display = 'none';，因为否则会在我没有点击图像的情况下绘制场景。
在 HTML 源代码中，我已经完成了：
<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>
目前，当我单击时不显示模态窗口，我不明白为什么。然后，在第一个问题之后，我当然必须删除container.style.display = 'none';，但我不能先这样做（会出现三个.js，图像也会出现）。
如果有人可以给我线索，让我首先显示模态窗口，然后在 Three.js 场景之后显示到这个窗口中。
如有需要，请随时向我询问更多详情。
感谢您的帮助。
更新 1：
我进步了。我设法将整个窗口变灰，但未显示弹出窗口。
在 HTML 代码中，我做了：
<!-- 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>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. </p>
</div>
<!-- Javascript -->
<script src="js/sphere_dev.js"></script>
进入 sphere_dev.js 代码，这里是我所做的（一开始，我得到了rel 和width 变量，之后我使用了fadeIn）：
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('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
// 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('<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() { // When click body
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); // They disappear
return false;
});
您可以在 [此链接][3] 上查看最后的结果。
如果有人可以看到为什么即使单击后整个窗口都是灰色的，也没有显示弹出窗口。
问候
更新 2：
根据不同的答案，我可以显示 Three.js 场景，但出现了居中问题。
您可以在 [此链接][4] 上查看最后的结果
如你所见，如果你点击图片显示弹出窗口，你会得到这个（在 Firefox 和 Chrome 上）：
问题在于弹出窗口未居中（水平向右略微移动，顶部的垂直边距过高，最后弹出窗口的底部不可见）。
我试图通过这样做（mainWidth 和 mainHeight 是全局变量）来居中：
// 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('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
// Display background
$('body').append('<div id="fade"></div>');
// Working only for background
$('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
return false;
};
我必须让你注意到函数 window.offsetHeight 在 Firefox 和 Chrome 上不起作用，而不是这个，我必须使用 window.innerHeight。
这是我用于此弹出窗口的 CSS：
.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;
}
整个 CSS 可在 [此链接][6] 上找到。
如果有人可以帮助我解决这个居中问题。
问候
【问题讨论】：
-
我认为您应该做的第一件事是让模态在没有 three.js 场景的情况下正常工作，因为这对我来说似乎只是定位问题。
-
谢谢，我要看看我的这部分问题
-
-@2pha 请看一下我上面的 UPDATE 1，我可以看到灰色窗口但不能显示弹出窗口。
标签： javascript jquery css canvas three.js