web-dev-qa-db-ja.com

1ページで複数のモーダルボックスを開く

ページ上の対応するリンクをクリックしたときに、さまざまなモーダルボックスを開く必要があるページがあります。構造と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) {

}
3
Felix B

後で選択できるように、モーダルを一意にする必要があります。これを行う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つの可能な解決策です。

10
pgk

以下は、ブートストラップを使用して複数のポップアップを表示する例です。また、例を示す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">&times;</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/

1
Nitesh

すべてのモーダルのクラスは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つのモーダルウィンドウのみをサポートします。ネストされたモーダルはサポートされません彼らは彼らが貧弱なユーザーエクスペリエンスを引き起こすと信じているので。

1
Tahir77667