JqueryモーダルウィンドウにThree.jsシーンを挿入しようとしました。目標は、より大きな次元、つまりより大きなウィンドウで、Three.jsシーンを使用することです。 このシーンは、シーンを表す画像をクリックした後に表示されると予想されますが、サイズは小さくなります。私は中央にイメージを持っているし、マウスがその上にある場合と、[1]Three.jsシーンをJqueryモーダルウィンドウに設定する
あなたが見ることができるように、[このリンク上]：今
、あなたは私が行うために管理しているものの例を見ることができますこれをクリックすると、Three.jsシーンがモーダルウィンドウに表示されます。あなたはそれをテストすることができますよう
しかし、私はクリックすると、物事は（...画像に加えて、シーンウィンドウが左上に表示されます）完全に間違っている
私は（私が何をしたかを説明ユーザが画像の上にあるとき
と（imageElement DOMを、それをクリックして）、私は標準のjQueryのモーダルウィンドウコードからインスパイアされたコードの以下の部分（）を呼び出します：Javascriptのソース[HERE] [2]）を参照してください
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;
};
のコンテナ（div） 0を実行して頂けれ：
// 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';を削除する必要がありますが、私はこれを最初に行うことはできません（Three.jsも表示されます）。
誰かが最初にモーダルウィンドウを表示し、Three.jsシーンをこのウィンドウに表示する手がかりを与えることができます。
必要に応じて詳細をお気軽にお問い合わせください。
ありがとうございました。
UPDATE 1：
私が進んでいます。私はグレーのフルウィンドウを管理しますが、ポップアップは表示されません。 HTMLコードで
、私がやった：sphere_dev.jsコードに
<!-- 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>
を、ここに私がやったこと（冒頭で、私は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]で最後の結果を確認できます。
クリックした後にフルウィンドウがグレーであっても、なぜポップアップが表示されないのか誰かが分かりました。
よろしく
UPDATE 2：異なった答えに続き
、私はThree.jsシーンを表示するために取得することができますが、心の問題が発生しています。
あなたは[リンク]の最後の結果を確認することができます[4]
あなたが見ることができるようにポップアップを表示するには画像をクリックした場合、あなたは（FirefoxとChromeで）これを取得する：
問題は、ポップアップが中央に配置されていないことです（わずかに右に水平に、縦に余白があり、最後はポップアップの下端が見えません）。私は、これに代えて、
// 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;
};
私はあなたがFirefoxとChromeで動作しないという機能window.offsetHeightに気づく行う必要があります。
mainWidthと
mainHeightはグローバル変数です）実行して、それを中央しようとしました
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
ありがとう、私はこの問題のこの部分を見ようとしています – youpilat13
- @ 2pha私は灰色のウィンドウになることができますが、ポップアップウィンドウを表示することはできません上記私の**更新1 **を見てください。 – youpilat13