JSモーダルボックス近い機能

私はモーダルボックスのw3schoolモーダル法を使用しています：http://www.w3schools.com/howto/howto_css_modals.asp JSモーダルボックス近い機能

つの層がうまく動作します。たとえば、

<div id="modal" class="modal_class"><div class="modal_content"></div></div> 
    <div id="inner_modal" class="mc_innder"><div class="inner_modal_content"></div></div>

私は最初のモーダルボックスを示しメインボタンをクリックしたとしましょう：私は次のようにその上にもう一つの層を追加しようとしています。

モーダルボックスには、もう1つのレイヤーがトリガーされる別のボタンがあります。

ここで2つのレイヤーがあります（第1レイヤー：1のz-インデックスと2の2番目のレイヤーなので、互いに重なり合っています）。

私が午前問題がクローズ機能である：

window.onclick = function(event) { 
if (event.target == modal) { 
    modal.style.display = "none"; 
} 
}

第2層は、コンテンツ（黒背景）の外側をクリックすることで閉じられると、その後、クリックイベントが第二層と第一にバインドされていますレイヤークロージングが機能しません。

私は2つのIDのために、特定のクリック機能を作成しようとしました：

jQuery(document).on('click', '#modal', function (e) {

と

jQuery(document).on('click', '#inner_modal', function (e) {

問題は、私は（#modalの内側に位置しています）第二ボタンをクリックしたときに、ということです、最初のレイヤを閉じて2番目のレイヤを開きます。

誰かが2つのレイヤーを取得する方法を教えてくれますか？

ありがとうございます！

出典

2016-06-11 steve Kim

私は、これはあなたが欲しいものだと思う：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
/* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    padding-top: 100px; /* Location of the box */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content */ 
.modal-content { 
    background-color: #fefefe; 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
} 

/* The Close Button */ 
.close { 
    color: #aaaaaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close:hover, 

/*jc start edits*/ 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 
.close2 { 
    color: #aaaaaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close2:hover, 
.close2:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 
/*jc end edits*/ 

</style> 
</head> 
<body> 

<h2>Modal Example</h2> 

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">×</span> 
    <p>Some text in the Modal..</p> 


    <!--jc start edits--> 
    <button id="myBtn2">Open # 2 Modal</button> 
    <!--jc end edits--> 
    </div> 

</div> 

<!--jc start edits--> 
<!-- The Modal --> 
<div id="myModal2" class="modal"> 
    <!-- Modal #2 content --> 
    <div class="modal-content"> 
    <span class="close2">×</span> 
    <p>Some other text in the Modal..</p> 
    </div> 
</div> 
<!--jc end edits--> 

<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 
var modal2 = document.getElementById('myModal2'); // jc added 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 
var btn2 = document.getElementById("myBtn2"); // jc added 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 
var span2 = document.getElementsByClassName("close2")[0]; // jc added 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 
btn2.onclick = function() { 
    modal2.style.display = "block"; // jc added 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 
span2.onclick = function() { 
    modal2.style.display = "none"; // jc added 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
    if (event.target == modal2) { 
     modal2.style.display = "none"; // jc added 
    } 
} 
</script> 

</body> 
</html>

私はちょうど最初のステップ3「それを自分で試してみてください」のサンプルを取って、それを修正。私が追加した行は、簡単に見つけることができるようにコメントを付けました。

記録のために、w3schoolsは本当に悪いことを教えています。実際にこのコードを使用することはお勧めしません。まず、懸念事項（javascriptを1つのファイルに、cssを別のファイルに、そしてhtmlを別のファイルに分けて）を分けてください。また、このコードはあまり拡張性がありません。追加するすべてのモーダルに対して、複数のjavascriptを追加する必要があります。再利用可能な関数を記述する必要があります。

全く別のサイトを見つけることをお勧めします。

出典

2016-06-11 23:03:17

JSモーダルボックス近い機能

答えて

関連する問題