web-dev-qa-db-ja.com

bootstrap=ボタンのクリック時に警告ボックスを表示

警告ボックスを直接表示する次のコード。

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

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

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">
        <h2>Dismissal Alert Messages</h2>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>

    </div>
</body>

ボタンをクリックしたときにアラートボックスを表示したいのですが、誰でも助けてくれますか？

javascriptjqueryasp.net-mvctwitter-bootstraptwitter-bootstrap-3
10
Neo

このjsfiddleは、クリック時にbootstrap警告ボックスを表示する方法を示しています

http://jsfiddle.net/g1rnnr8r/2/

Jqueryのshow()メソッドを実装する必要があります。使用する必要があるコードは次のとおりです。

$(document).ready(function(){
    $('button').click(function(){
        $('.alert').show()
    }) 
});
6
Paul Fitzgerald

これを試して。ここで行われているのは：

  1. 「警告メッセージを表示」ボタンを1つ追加しました。
  2. デフォルトでは、警告メッセージは非表示になります。
  3. 「アラートメッセージを表示」をクリックすると、アラートメッセージが表示されます
$("#btnShow").click(function(){
  
  $(".alert").hide().show('medium');
});
.alert{
  display:none;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

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

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">
      
        <h2>Dismissal Alert Messages</h2>
      
      <button id="btnShow">Show Alert message</button>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>

    </div>
</body>
4
Puneet

カスタムモーダルダイアログボックスを作成する場合は、この小さなライブラリを使用できます。 http://bootboxjs.com/

<!-- bootbox code -->
    <script src="bootbox.min.js"></script>
    <script>
        $(document).on("click", ".alert", function(e) {
            bootbox.alert("Hello world!", function() {
                console.log("Alert Callback");
            });
        });
    </script>

それ以外の場合は、モーダルトリガーとjavascriptトリガーを手動で作成する必要があります。

3
Pekka

これを確認できます：

 <div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="alert alert-success alert-dismissible">
            <a  class="close" data-dismiss="modal" aria-label="close">&times;</a>
            <strong>Success!</strong> Indicates a successful or positive action.
          </div>
    </div>
  </div>
</div>
1
Nitin Pawar