jQueryを使用してブートストラップモーダルウィンドウを開く方法

769

Twitter Bootstrapのモーダルウィンドウ機能を使用しています。誰かが私のフォームの送信をクリックしたときに、フォームの「送信ボタン」をクリックするとモーダルウィンドウが表示されます。

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

jQuery：

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});
javascript  jquery  twitter-bootstrap 
— ユーザー244394
ソース
表示オプションにタイプミスがあります。ブール値をとるため、「false」を引用符で囲まないでください-$（ '＃my-modal'）。modal（{show：false}）;
— Darren Parker

回答:

1413

ブートストラップには、モーダルで手動で呼び出すことができるいくつかの関数があります。

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

詳しくはこちらをご覧ください：ブートストラップモーダルコンポーネント

具体的には、メソッドセクション。

したがって、変更する必要があります。

$('#my-modal').modal({
    show: 'false'
});

に：

$('#myModal').modal('show');

独自のカスタムポップアップを作成する場合は、別のコミュニティメンバーからの推奨動画を以下に示します。

https://www.youtube.com/watch?v=zK4nXa84Km4

— 追跡
ソース
5
これが私の場合うまくいかない理由がわかりません。私のページには同じデモコードがあり、送信ボタンを上記のようにコーディングしました。しかし、[送信]をクリックすると、モーダルウィンドウが速く点滅して消えてしまいます。ページに戻るには、ブラウザの「戻る」ボタンをクリックする必要があります。
— Chris22、2014年
6
私は上記の私のコメントに答えを見つけました。サイトページのbootrap.jsへのリンクが重複しています。
— Chris22、2014年
1
Uncaught TypeError：$（...）。modalは関数ではありません。これはおそらく私ですが、このエラーが発生する理由は何ですか？（私はjQueryを持っています）
— Vladimir verleg
4
私は自分の問題を見つけ、Jqueryを含むファイル魔女にajax呼び出しを行いました。jQueryが2回含まれている場合は機能しません。
— Vladimir verleg
2
試しました.modal('show')が、Google Chromeブラウザでは機能しません
— Durga
89

さらに、データ属性を介して使用できます

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

この特定のケースでは、javascriptを記述する必要はありません。

詳しくは、http：//getbootstrap.com/2.3.2/javascript.html#modalsをご覧ください。

— ガンダレス
ソース
4
明確にするために、「JavaScriptを使用する必要がない」とは、「JavaScriptを記述する必要がない」ことを意味し、JavaScriptはまだ使用されています。回答を編集しようとしましたが、「正確」ではなかったため、拒否されました。JavaScriptを無効にして上記のコードを試しても、機能しません。つまり、私にはJavaScriptを使用する必要があります。
— npretto
83

ほとんどの場合、$('#myModal').modal('show');機能しない場合は、jQueryが2回含まれていることが原因です。jQueryを2回含めると、モーダルが機能しなくなります。

リンクの1つを削除して、再度機能させる。

さらに、一部のプラグインもエラーを引き起こします。この場合、追加します 

jQuery.noConflict(); 
$('#myModal').modal('show');
— ウラジミール・ヴァーレッグ
ソース
3
事前にパッケージ化されたjQueryバージョンのDataTablesが原因で発生しました
— Wesley Smith
2
どうもありがとうございました。同じ問題があります。モーダルは関数ではありません。しかし、jQuery.noConflict（）を追加すると、機能します。
— Jobayer Ahmmed
1
この回避策は、根本的な原因を解決できない場合にのみ使用してください（つまり、jQueryを1回だけ含める）。サードパーティのプラグインがプラグインを含んでいる場合は、含まれていないバージョンを探すか、サードパーティに連絡して作成してください。
— rybo111
19

jQueryセレクターを使用してモーダルメソッドを（パラメーターを渡さずに）呼び出すだけです。

次に例を示します。

$('#modal').modal();
— ブレーン
ソース
1
モーダルに追加のパラメーターを渡すにはどうすればよいですか？たとえば、特定の（動的）ID？
— Pathros
1
IDを動的にするにはどうすればよいですか？IDで作るの？はいの場合、jQueryの$（this）機能を使用して、現在のオブジェクトを選択し、パラメーターを彼に渡すことができます。
— Brane
13

リンクのonclick関数を使用してjQueryでモーダルを呼び出す場合、「href」をnullにすることはできません。

例えば：

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

モーダルは表示できません。正しいコードは次のとおりです。

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
— サネリー
ソース
12

ドキュメントの準備ができたらすぐにブートストラップアラートをロードする方法を次に示します。追加するだけでとても簡単です

 $(document).ready(function(){
   $("#myModal").modal();
});

私が作っデモを W3Schoolsの上。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>
スニペットを展開

— csandreas1
ソース
10

ここで完全なソリューションをチェックしてください：

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

結果を得るために必要な順序でライブラリを配置してください：

1-最初のbootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

（つまり、jquery.min.jsはbootstrap.min.jsの前に呼び出す必要があります）

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— A.Aleem11
ソース
7

私は失敗したいくつかの方法を試しましたが、以下は魅力のように私のために働きました：

$('#myModal').appendTo("body").modal('show');
— いつもの
ソース
2
同じ！これも私にとって有効な唯一の解決策です。
— pengz 2018年
本当に望んでいません.appendTo("modal-body")か？
— James A Mohler、2018年
@novembersky、クリックイベント内、またはjqueryを使用してページが読み込まれたときにコードを配置する必要があります：$（document）.ready（function（）{$（ "＃myModal"）。modal（）;}）;
— Abhijit Kumar
7

関数を呼び出すときに$記号の代わりにjQueryを使用してみてください。以下に示すように、私の場合は機能しました。

jQuery.noConflict(); 
jQuery('#myModal').modal('show');

jQuery.noConflict（）; なぜなら、jQuery（ '＃myModal'）。modal（ 'show'）; jQueryを2回インクルードしたことが原因です。jQueryを2回含めると、モーダルが機能しなくなります。その場合、私の場合と同様に、問題が解決します。

さらにこのリンクに行くことができます

JQueryを介した呼び出しでブートストラップモデルウィンドウが表示されない

— IB
ソース
4

試す

$("#myModal").modal("toggle")

ID myModalのモーダルを開いたり閉じたりします。

上記が機能しない場合は、bootstrap.jsが他のjsファイルによってオーバーライドされていることを意味します。これが解決策です

1：-bootstrap.jsを一番下に移動して、他のjsファイルを上書きするようにします。

2：-順序が以下のようになっていることを確認してください

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
— ニキル・モハディカー
ソース
4 
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

この下のコードでモーダルを起動できます。

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});
— アルペルツク
ソース
1

これを試して

myModal1はモーダルのIDです

$('#myModal1').modal({ show: true });
— vivek
ソース
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
— サーノシュ・ラフガー
ソース
3
すでに回答がある質問に回答する場合は、既存の回答を拡張してみてください。また、一般的には、コードが質問にどのように答えるかの説明を含めることをお勧めします。
— Chris Camaratta
0

Bootstrap 4.3-詳細はこちら

コードスニペットを表示

— カミル・キエチェフスキ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.