单击按钮时显示 Bootstrap 警告框

新手上路,请多包涵

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

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

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

原文由 Neo 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 324
2 个回答

这个 jsfiddle 展示了如何在点击时显示引导程序警告框

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

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

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

原文由 Paul Fitzgerald 发布,翻译遵循 CC BY-SA 3.0 许可协议

 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 并编写了一些代码。试着理解,如果你没有得到问我。好的希望这对你有帮助,如果没有请问我更多。

原文由 saikiran.vsk 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题