私は、JavaScriptの複数のモーダルを開くことができるボタンの関数を書こうとしています

Question

私はを作成しようとしています複数のモーダルがあるページを作成しますが、それら。

ボタンが入っているコンテナに応じてページ上の任意のモーダルを開くことができる1つの関数を書く方法はありますか？

これは私のコード例です。

<div> 
     <button type="button" onclick="showModal1()">Open Modal</button> 
     <div id="overlay"></div> 
     <div class="modal" id="modal1"> 
      <span class="close" onclick="hideModal1()"></span> 
      <p>modal content</p> 
    </div> 
    </div> 

<div> 
    <button type="button" onclick="showModal2()">Open Modal</button> 
    <div id="overlay"></div> 
    <div class="modal" id="modal2"> 
     <span class="close" onclick="hideModal2()"></span> 
     <p>modal content</p> 
    </div> 
</div> 

JS

function showModal1() { 
    document.getElementById("modal1").style.display = "block", 
    document.getElementById("overlay").style.display = "block" 
} 
function hideModal1() { 
    document.getElementById("modal1").style.display = "none", 
    document.getElementById("overlay").style.display = "none" 
} 
function showModal2() { 
    document.getElementById("modal2").style.display = "block", 
    document.getElementById("overlay").style.display = "block" 
} 
function hideModal2() { 
    document.getElementById("modal2").style.display = "none", 
    document.getElementById("overlay").style.display = "none" 
} 

Answer 1

ここでは簡単な例をthetが一つだけの機能を使用して、ために尋ねています。もちろん、HTMLやスクリプトを分離するために "onclick"を取り除くことで、thesublimeオブジェクトが彼の答えでしたように、より一般的なものにすることもできます。

function showModal(modalId) { 
 
document.getElementById("modal" + modalId).style.display = "block", 
 
document.getElementById("overlay").style.display = "block" 
 
} 
 
function hideModal(modalId) { 
 
document.getElementById("modal" + modalId).style.display = "none", 
 
document.getElementById("overlay").style.display = "none" 
 
}

.modal { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    display: none; 
 
    z-index: 100; 
 
    background: #fff; 
 
    min-width: 300px; 
 
    padding: 10px; 
 
    } 
 

 
.modal .close { 
 
    cursor: pointer; 
 
    float: right; 
 
} 
 

 
#overlay { 
 
    display: none; 
 
    opacity: 0.4; 
 
    background-color: #000; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 99; 
 
}

<div id="overlay"></div> 
 

 
<button type="button" onclick="showModal(1)">Open Modal</button> 
 
<div class="modal" id="modal1"> 
 
<span class="close" onclick="hideModal(1)">X</span> 
 
<p>modal content</p> 
 
</div> 
 

 
<button type="button" onclick="showModal(2)">Open Modal</button> 
 
<div class="modal" id="modal2"> 
 
<span class="close" onclick="hideModal(2)">X</span> 
 
<p>modal content</p> 
 
</div>

Answer 2

まず、あなたのすべてのボタンにある種のクラスを置きます。 modal__triggerとしましょう次に、それぞれにいくつかの種類の動的データ属性を割り当てます。マッチングのIDを割り当て、各モーダルのために、今すぐ

<button class="modal__trigger" data-modal="modal--id">Button</button>

、例えば、のは言わせて：

今

<div class="modal" id="modal--id">Content</div>

、あなたがする必要があるすべてはあなたが好きなイベントにリスナーを追加することです開く、閉じるなど。

for (let i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener('click', open.bind(buttons[i])) 
} 

function open() { 
    let id = this.getAttribute('data-modal') 
    let modal = document.getElementById(id) 
    modal.classList.add('modal--visible') 
} 

function close() { 
    (however you want to close the modal, using the same sort of logic) 
} 

これは基本ケースで動作する非常に単純化されたバージョンです。私の内部チームのために書かれたはるかに複雑な図書館がありますが、私にそれをリンクしてもらいたいのですが、この場合は必要かどうかはわかりません。

Answer 3

ここが方法です。

<button type="button" onclick="showModal(1)">Open Modal</button> 
<div id="overlay"></div> 
<div class="modal" id="modal1"> 
    <span class="close" onclick="hideModal(1)"></span> 
    <p>modal content</p> 
</div> 

<button type="button" onclick="showModal(2)">Open Modal</button> 
<div id="overlay"></div> 
<div class="modal" id="modal2"> 
    <span class="close" onclick="hideModal(2)"></span> 
    <p>modal content</p> 
</div> 

JS

function showModal(modal_no) { 
    document.getElementById("modal"+modal_no).style.display = "block", 
    document.getElementById("overlay").style.display = "block" 
} 
function hideModal(modal_no) { 
    document.getElementById("modal"+modal_no).style.display = "none", 
    document.getElementById("overlay").style.display = "none" 
} 

Answer 4

あなたはjQueryのを使用することができるしている場合は、.click()メソッドを使用して、JavaScriptの要素を「クリック」にイベントハンドラをバインドすることができ、あなたは.siblings()と.parent()を使って近くの要素を見つけることができます（とりわけ）。このようにして、モーダル開始クラスとモーダル終了クラスのそれぞれに1つのバインディングを定義し、そのコンテキストを使用してどのモーダルを開いて閉じるかを決定するだけで済みます。 $(this)は、クリックされた特定の要素を取得することに注意してください。

$(function() { 
 
    $('.modal-open').click(function() { 
 
    $(this).siblings('.modal').add('#overlay').show(); 
 
    }); 
 

 
    $('.modal-close').click(function() { 
 
    $(this).parent('.modal').add('#overlay').hide(); 
 
    }); 
 
});

.modal { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    display: none; 
 
    z-index: 100; 
 
    background: #fff; 
 
    min-width: 300px; 
 
    padding: 10px; 
 
} 
 
.modal-close { 
 
    cursor: pointer; 
 
    float: right; 
 
} 
 
#overlay { 
 
    opacity: 0.4; 
 
    background-color: #000; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 99; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style="display:none" id="overlay"></div> 
 

 
<div> 
 
    <button class="modal-open">Open Modal #1</button> 
 
    <div style="display:none" class="modal"> 
 
    <span class="modal-close">x</span> 
 
    <p>Modal #1 content</p> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <button class="modal-open">Open Modal #2</button> 
 
    <div style="display:none" class="modal"> 
 
    <span class="modal-close">x</span> 
 
    <p>Modal #2 content</p> 
 
    </div> 
 
</div>

注：正しくここで動作するように.siblings('.modal')ためには、ボタンやモーダルは、自分の<div>要素内に配置する必要があります。または、ボタンは兄弟かもしれない危険を冒しますmodalクラスの2つの要素があります。

.addEventListenerを使用してバニラJavaScriptでこれを行うこともできます。もちろん、兄弟と親要素を別の方法で取得する必要があります。