单击按钮时显示 Bootstrap 警告框

Question

以下代码显示了一个警告框：

<head>
    <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>

如何在单击按钮时显示警告框？

Answer 1

如果你想创建自定义模式对话框，那么你可以使用这个小库：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 触发器。

Answer 2

试试这个。这里所做的是：

添加了一个按钮"Show Alert message"。
默认情况下，警报消息将被隐藏。
点击 "Show alert message" 将显示警告消息

$("#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>

Answer 3

function showAlert(){
  if($("#myAlert").find("div#myAlert2").length==0){
    $("#myAlert").append("<div class='alert alert-success alert-dismissable' id='myAlert2'> <button type='button' class='close' data-dismiss='alert'  aria-hidden='true'>&times;</button> Success! message sent successfully.</div>");
  }
  $("#myAlert").css("display", "");
}

<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>

<button value="showAlert" onclick="showAlert();"> Show Alert</button>

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

    </div>

已编辑

我添加了一些 ID 并编写了一些代码。试着理解，如果你没有得到问我。好的希望这对你有所帮助，如果没有，请问我更多。

Answer 4

此 jsfiddle 展示了如何在点击时显示 bootstrap 警告框

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

您需要实现 jquery 的 show() 方法。您需要使用的代码是。

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

Answer 5

你可以看看这个：

 <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>

单击按钮时显示 Bootstrap 警告框

Show Bootstrap alert box on a button click

javascript

asp.net-mvc

jquery

twitter-bootstrap

twitter-bootstrap-3