Question

在我的网站上，我想显示一条关于使用 Bootstrap 模式使用 cookie 的消息。但是，页面加载时没有显示模态。

<div class="modal fade show" id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="cookieModal" aria-hidden="">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <!-- <h5 class="modal-title" id="cookieTitle">Modal title</h5> -->
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <span>We use cookies to enhance user experience. See how we use <a href="assets/CookiesAndDisclaimer.pdf" target="_blank" class="text-dark">Cookies</a> and our<a href="assets/PrivacyStatement.pdf" class="ml-1 text-dark" target="_blank">Privacy policy</a> </span>
        </div>
        <!-- <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Agree</button>
        </div> -->
      </div>
    </div>
  </div>

Answer 1

确保 import jquery 和 popper.js 到您的文件。如果这些脚本存在，则引导模式会起作用。

另外，我们需要一个按钮来使可见和不可见。

<!-- bootstrap import -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<div class="modal fade show  " id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="cookieModal" aria-hidden="">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="cookieTitle">Information </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <span>We use cookies to enhance user experience. See how we use <a href="assets/CookiesAndDisclaimer.pdf" target="_blank" class="text-dark">Cookies</a> and our<a href="assets/PrivacyStatement.pdf" class="ml-1 text-dark" target="_blank">Privacy policy</a> </span>
        </div>
        <!-- <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Agree</button>
        </div> -->
      </div>
    </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cookieModal">
  show
</button>

<!-- jquery and pooper.js import -->
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

页面加载时不显示模态（使用引导程序）

1 个答案: