Question posted in
You can find the official documentation here.

Modal Dialog is Loaded But Invisible – Jquery ajax

I tried to make a modal. I use AJAX to show the modal but the modal is invisible. When I use the button’s trigger with data-toggle and data-target, the modal is showing up visible.

This is what I have tried to do

  • Check that all script is correctly loaded
  • Tried to reorder script
  • Delete fade class in modal and the modal visible but with bad UI
  • Change bootstrap version but result is same

This is my code

AJAX

$("body").on("click", ".btn-show", function (event) {
  event.preventDefault();

  var me = $(this),
    url = me.attr("href"),
    title = me.attr("title");

  $("#modal-title").text(title);

  $.ajax({
    url: url,
    dataType: "html",
    success: function (response) {
      $("#modal-body").html(response);
      $("#modal").modal("show");
    },
  });
});

HTML Modal

<div class="modal fade" id="modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" id="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="modal-title">Form Input</h4>
      </div>

      <div class="modal-body" id="modal-body">
      </div>

      <div class="modal-footer" id="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary" id="modal-btn-save">Save
          changes
        </button>
      </div>
    </div>
  </div>
</div>

SS modal exists but is not visible:

enter image description here

Tags:

3

Answers


  1. 0

    There are no errors with the modal, and the $("#modal").modal("show"); displays the modal just fine (see code snippet below),

    Since the code snippet below works fine, it seems clear that the original code’s “success” function is never called:

    success: function (response) {
  $("#modal-body").html(response);
  $("#modal").modal("show");
}

    I suggest adding an error function to the ajax parameters:

    error: function (jsXHR, textStatus, errorThrown) {
  // handle error here
}

    From the jQuery docs:

    error
    Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )
    A function to be called if the request fails.

    function showModal() {
  $("#modal-title").text('Sample Title');
  $("#modal-body").html('Sample Response');
  $("#modal").modal("show");
}
    <!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<!-- scripts needed by Bootstrap -->
<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/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<body class="p-2">
  <button onclick="showModal()">Show Modal</button>

  <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header" id="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
          <h4 class="modal-title" id="modal-title">Form Input</h4>
        </div>

        <div class="modal-body" id="modal-body">
        </div>

        <div class="modal-footer" id="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
          <button type="button" class="btn btn-primary" id="modal-btn-save">Save
          changes
        </button>
        </div>
      </div>
    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    I just fix this problem on Laravel Voyager Admin.

    This is because I just declare two times bootstrap scripts.

    Login or Signup to reply.
  3. 0

    I had the same issue, in my case the code relied on the "fade in" animation to properly display the modal and my code only had the "fade" class. So, while it was adding the class "show" to the modal, the property would stay with opacity 0 due to the animation overlapping it.

    Original code with bug:

    <div class="modal fade" id="modal" role="dialog" >

    My fix:

    <div class="modal fade in" id="modal" role="dialog" >
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search