Bootstrap 模态只是在不出现的情况下褪色答案

【问题标题】：Bootstrap modal just get faded without appearingBootstrap 模态只是在不出现的情况下褪色
【发布时间】：2020-12-29 11:37:51
【问题描述】：

我的引导模式没有显示，我只是得到了褪色的屏幕。它可以在手机和平板电脑上运行，但不能在台式机上运行？有人知道为什么会这样吗？

代码如下：

<button type="button" class="btn btn-primary" data-toggle="modal" data-toggle="modal" data-target=".bd-example-modal-lg">Open Modal</button>


<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          {{ module.author_image }}
          <p>
            {{ module.author_name }}
          </p>
          {{ module.author_description }}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
  </div>
</div>

css:

 .modal {
  text-align: center;
  padding: 0!important;
   overflow: visible;
display: block;

}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
} 

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

js:

$('#myModal').on('shown.bs.modal', function (e) {
  $('#myInput').trigger('focus')
})

任何建议都会有所帮助，谢谢！ :)

【问题讨论】：

已提出此问题，请在此处查看答案stackoverflow.com/a/11788713/3559462 stackoverflow.com/a/13368485/3559462
你为什么要使用所有的覆盖css？
在打开模式时，您希望将焦点放在 myInput 元素上，但您没有为其附加任何输入 html 标记???
你想达到什么目的？？
@nikhilsugandh 不，再次准备好我的问题 :)

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

css和js和html中的类冲突太多了。

建议如下：如果您想在模式中进行任何自定义更改，请在主 div 中添加一个类，然后仅使用该类进行更改。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <style>

    </style>  

    <title>Hello, world!</title>
  </head>
  <body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Open Modal
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{ module.author_image }}
          <p>
            {{ module.author_name }}
          </p>
          {{ module.author_description }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  </body>
</html>

【讨论】：

【解决方案2】：

您忘记了类中的 -bs-：

    <button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#myModal"
>
  Open Modal
</button>

<div
  id="myModal"
  class="modal fade bd-example-modal-lg"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-bs-dismiss="modal">
          &times;
        </button>
      </div>
      <div class="modal-body">
        {{ module.author_image }}
        <p>{{ module.author_name }}</p>
        {{ module.author_description }}
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-default"
          data-bs-dismiss="modal"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</div>

【讨论】：

刚刚用你的 Js 和 Css 试了一下，它对我有用。将再次检查！

【解决方案3】：

如果我是正确的，当模式打开时，您希望焦点位于输入元素上：

就是这样： https://jsfiddle.net/cd7z0vtr/7/

HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

JS：

$('#exampleModal').on('shown.bs.modal', function () {
  $('#recipient-name').trigger('focus')
})

【讨论】：

不，请准备好我的问题。我的模式没有出现，我的屏幕变暗了。
@Dejan 给它一个绿色的勾号和一个可能的支持！！！