logo标签列表

点击按钮时显示Bootstrap警告框

javascriptjqueryasp.net-mvctwitter-bootstraptwitter-bootstrap-3
20
以下代码显示一个警告框：

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

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

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

5个回答
13

这个 jsfiddle 展示了如何在点击时显示一个 Bootstrap 警告框。

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

你需要实现 jQuery 的 show() 方法。你需要使用的代码是：

$(document).ready(function(){
    $('button').click(function(){
        $('.alert').show()
    }) 
});
3
第二次使用时它不起作用 :( 只有在刷新页面后才能起作用。 - Neo
1
啊，好的，让我来修复一下@Neo。你能确认每次点击按钮时都需要出现一个新的警告框吗？ - Paul Fitzgerald
是的，实际上我会使用它并动态生成警报。。在成功和失败时，我将显示警报消息。 - Neo
2
@Neo 嘿，试试这个，它可以按你的要求工作（我希望）http://jsfiddle.net/uxzobhen/2/ 我又稍微改了一下，我认为这样最好。让我知道。 - Paul Fitzgerald
3
每次点击按钮都会添加新的消息，这不是理想的情况。在将警告 div 添加到父元素之前添加 $('.parent').empty(); 就可以解决这个问题了。 - WAQ
它表示警告已从 DOM 中删除。 - serge
8

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

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

当我第二次点击按钮时，它不起作用 :( 只有在刷新页面后才能正常工作。 - Neo
我已更新，请现在检查，警报将会一次又一次地出现。好的。 - saikiran.vsk
4

试一下这个。

  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>

3
我点击按钮第二次时它不起作用 :( 只有在刷新页面后才能起作用。 - Neo
不错，我喜欢这个解决方案 @Puneet - Paul Fitzgerald
点击关闭按钮后，该消息不会再次显示。 - zshanabek
4
您可以查看这个链接：
 <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>
2

如果您想创建自定义模态对话框，可以使用这个小库：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触发器。
使用我的上面的代码，您能帮我进行自定义修改吗？ - Neo
漂亮的样式，Bootstrap 4中是否有带有“alert”的可用选项？ - Er. Amit Joshi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接