Bootstrap modal just get faded without appearing

Question

My bootstrap modal doesnt show, im getting just faded screen. Its is working on mobile and tablet, but doesnt work on desktop? Anyone have idea why is this happening?

here is code:

<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')
})

Any advice would be helpful, thanks! :)

This question has been asked, please review answers here https://stackoverflow.com/a/11788713/3559462 https://stackoverflow.com/a/13368485/3559462 — Vikas Lalwani, Dec 29 '20 at 12:36
on opening the modal you want to achieve a focus on myInput element but you havent attached any input html tag for it ??? — Nikhil S, Dec 29 '20 at 13:43

score 1 · Answer 1 · answered Dec 29 '20 at 12:04

There are so many conflicts with css and js and classes in html.

Here is the suggestion: if you want any custom change in the modal add a class in the main div and then make the changes with that class only.

<!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>

score 0 · Answer 2 · answered Dec 29 '20 at 12:09

You forgot the -bs- inside the classes:

    <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>

Just tried it with your Js and Css and it was working for me. Will check it out again! — Paul B, Dec 31 '20 at 15:43

Nikhil S · Answer 3 · 2021-01-02T04:56:51.677

If I am correct you want the focus to be on an input element when the modal opens:

This is it: 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')
})

Nope, ready my question please. My modal doesnt show up, Im getting faded screen. — Dejan, Dec 30 '20 at 14:08

Bootstrap modal just get faded without appearing

3 Answers3