Блог

Это вывод желаний при нажатии кнопки. рядом с текстом есть кнопка закрытия.

 <div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">amp;times;</button>
    <strong>Successfully Alerted</strong> 
</div>
  

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

 <div class="alert alert-dismissible w-50" style="display: none;">
  <button type="button" class="close" data-dismiss="alert">amp;times;</button>

</div>
<button class="btn btn-info abtn">Alert</button>

<script type="text/javascript">
  $(document).ready(function() {
    showAlert();
  });

  function showAlert() {
    $('.abtn').click(function() {
      $('.alert').addClass("alert-success");
      $('.alert').text("Successfully Alerted").show();
    });

  }

</script>
  

Я делаю это, потому что хочу показывать разные сообщения в зависимости от ситуации с разным цветом. есть идеи, почему это происходит и как мне это решить?

Вам нужно использовать .append() вместо .text , чтобы X отображаться в вашем alert , а также в text

.text() заменит все из вашего alert div

Живая демонстрация:

 $(document).ready(function() {
  $('.abtn').click(function() {
    $('.alert').addClass("alert-success");
    $('.alert').append("Successfully Alerted").show();
  });
});  

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="alert alert-dismissible w-50" style="display: none;">
  <button type="button" class="close" data-dismiss="alert">amp;times;</button>

</div>
<button class="btn btn-info abtn">Alert</button>