кнопка отклонения при загрузке не отображается правильно

Question

У меня есть предупреждение boostrap, которое появляется при отправке формы через jquery, но кнопка отклонения перекрывается с текстом, и я не могу понять, почему. Я не создаю стиль оповещения или кнопки. Снимок экрана с ошибкой и используемым кодом:

screesnhot

Answer 1

Как я уже упоминал в своем комментарии, нет необходимости создавать предупреждение в jQuery, поскольку оно уже встроено в Bootstrap. Единственное, для чего вы должны использовать jQuery, это показать предупреждение при отправке формы:

$(function() {
  $('#contact-form').submit(function(e) {
    e.preventDefault();
    $('.alert').show();
    $(this).hide();
  });
});

.alert {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-10">
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        Contact form successfully submitted. Thank you!
      </div>

      <form id="contact-form">
        <label>Name: <input type="text"/></label>
        <input type="submit" />
      </form>
    </div>
  </div>
</div>

Это также будет работать, если вы создадите предупреждение как переменную JavaScript:

$(function() {
  var messageText = 'Contact form successfully submitted. Thank you!';
  var alertBox = '<div class="alert alert-success alert-dismissible fade show" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + messageText + '</div>';
  
  $('.col-sm-10').append(alertBox);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-10">
    
    </div>
  </div>
</div>

Answer 2

Bootstrap имеет свой собственный класс предупреждения и отклонения. Вам не нужно использовать какой-либо плагин Jquery для этого. Попробуйте этот код

<div class="alert alert-success alert-dismissible fade show" role="alert">
        Contact form successfully submitted. Thank you!.
   <button type="button" class="close" data-dismiss="alert" aria- label="Close">
   <span aria-hidden="true">&times;</span>
 </button>
</div>