单击按钮时显示引导警报框

Question

单击按钮时显示引导警报框

Neo*_*Neo 11 javascript asp.net-mvc jquery twitter-bootstrap twitter-bootstrap-3

以下代码直接显示警告框.

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

Run Code Online (Sandbox Code Playgroud)

我想在按钮点击时显示警告框可以有人帮我这样做吗？

Answer 1

Pau*_*ald 8

这个jsfiddle显示了如何在点击时显示引导警报框

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

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

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

Run Code Online (Sandbox Code Playgroud)

@PaulFitzgerald每次点击按钮都会添加新消息,这是不明智的.只需添加`$('.parent').empty();`在将警报div附加到父级之前修复问题. (3认同)
当我第二次使用它时它不起作用:(它仅在页面刷新后才起作用 (2认同)
@Neo嘿，尝试一下，它可以按照您的要求运行（我希望）http://jsfiddle.net/uxzobhen/2/再次稍作更改，我认为这是最好的。让我知道 (2认同)

Answer 2

sai*_*vsk 5

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", "");
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

编辑

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

归档时间：	10 年，4 月前
查看次数：	81731 次
最近记录：	5 年，10 月前