Показать окно предупреждения Bootstrap при нажатии кнопки

Следующий код показывает окно с предупреждением:

<head>
    <link rel="stylesheet" href="#" onclick="location.href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'; return false;">
    <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>

Я хочу показать окно предупреждения при нажатии кнопки, может ли кто-нибудь помочь мне сделать это?

Ответ 1

Этот jsfiddle показывает, как вы можете показать окно предупреждения при начальной загрузке

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

Вам необходимо реализовать метод jquery show(). Код, который вам нужно использовать:

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

Ответ 2

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>

Ответ 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

Если вы хотите создать пользовательское модальное диалоговое окно, вы можете использовать эту небольшую библиотеку для него: 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 вручную.

Ответ 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>