Question

我有一个boostjrap警报，当通过jquery提交表单时会弹出，但是dismiss按钮与文本重叠，我无法弄清楚原因。我没有设置警报或按钮的样式。该错误和代码的屏幕截图如下：

Answer 1

引导程序具有自己的警报和关闭类。您不需要为此使用任何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>

Answer 2

正如我在评论中提到的那样，由于它已经内置在Bootstrap中，因此无需在jQuery中构建警报。您应该使用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>

引导程序关闭按钮无法正确显示

2 个答案: