ページ上の対応するリンクをクリックしたときに、さまざまなモーダルボックスを開く必要があるページがあります。構造とJavaScriptを1つのウィンドウで機能させることができますが、複数のウィンドウで機能させることはできません。各モーダルボックスをループする必要があると思っています...しかし、構文を完全に理解することはできません。
これはクライアントのWordPressサイト用で、高度なカスタムフィールドを使用してコンテンツを入力しています。ページはまだ公開されていないため、コードを表示するコードペンを次に示します。 http://codepen.io/FelixB/pen/EPvEVG
コード:
var modal = document.getElementsByClassName('modal-window');
var btn = document.getElementsByClassName("click-to-open");
var span = document.getElementsByClassName("close")[0];
for (var i = 0; i < btn.length; i++) {
var thisBtn = btn[i]
thisBtn.onclick = function() {
alert("hello");
//modal.style.display = "block";
}
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
}
後で選択できるように、モーダルを一意にする必要があります。これを行う1つの方法は、id
を使用することです。
<div id="modal-window-one" class="modal-window modal"></div>
<div id="modal-window-two" class="modal-window modal"></div>
どのウィンドウを開くかを定義する必要があります。これに対する1つの可能な解決策は、data-attributes
を使用することです。
<div class="click-to-open" data-modal="modal-window-one"> //will open modal one
<div class="click-to-open" data-modal="modal-window-two"> //will open modal two
そして-イベント:
var btn = document.getElementsByClassName("click-to-open");
for (var i = 0; i < btn.length; i++) {
var thisBtn = btn[i];
thisBtn.addEventListener("click", function(){
var modal = document.getElementById(this.dataset.modal);
modal.style.display = "block";
}, false);
繰り返しますが、これは1つの可能な解決策です。
以下は、ブートストラップを使用して複数のポップアップを表示する例です。また、例を示すjsfiddleを添付しています。クラス名をモーダルダイアログボックスに設定します。
<div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div> </div></div>
モーダルダイアログボックスをインスタンス化します。
$('.myModal').modal();
以下は実行中のjsfiddleです https://jsfiddle.net/niteshp27/msdg98vn/
すべてのモーダルのクラスはclass="modal"
と同じままですが、同じ画面に表示したいモーダルが多数ある場合は、Bootstrapモーダルが書き込まれるため、"id"
プロパティを使用しますJavascriptとJSでは完全にIDに基づいています
<div id="modal-one" class="modal fade"></div>
<div id="modal-two" class="modal fade"></div>
<button>タグのdata-target
属性を使用して、どのボタンがどのモーダルをターゲットにするかを定義する必要があります。 <a>タグを使用してモーダルをトリガーする場合は、href
属性を使用します。例:
<button data-toggle="modal" data-target="#modal-one"> First Modal </button>
<button data-toggle="modal" data-target="#modal-two"> Second Modal </button>
または、<a>タグを使用する場合は;
<a data-toggle="modal" href="#modal-one"> First Modal </a>
<a data-toggle="modal" href="#modal-one"> First Modal </a>
詳細については、次のページをチェックアウトできます Bootstrap Modals。
注:Bootstrapの公式ドキュメントによるとBootstrapは一度に1つのモーダルウィンドウのみをサポートします。ネストされたモーダルはサポートされません彼らは彼らが貧弱なユーザーエクスペリエンスを引き起こすと信じているので。