stackoom
  简体   繁体   中英

Modal Bootstrap 4 doesn't show

 原文  2019-08-24 11:58:22  4   3    javascript/ html/ bootstrap-4/ bootstrap-modal

Question

I have a button to open a Bootstrap 4 modal.

Here's the html:

<button
  type="button"
  class="btn btn-info btn-circle btn-sm"
  data-toggle="modal"
  data-target="#editModal"
  id="btn-modal"
>
  <i class="fas fa-fw fa-pencil-alt"></i>
</button>

<div
  class="modal fade"
  id="editModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="editModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <form method="post" action="xx">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="editModalLabel">Edit</h4>
          <button type="button" class="close" data-dismiss="modal">
            &times;
          </button>
        </div>
        <div class="modal-body">
          //Modal Body
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            <i class="fas fa-times" style="margin-right:5px"></i> Cancel
          </button>
          <button type="submit" name="submit" class="btn btn-success">
            <i class="fas fa-location-arrow " style="margin-right:5px"></i> Save
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

And here's the JavaScript:

$('#btn-modal').on('click', function(){    
    $("#editModal").modal('show');  
});

I've added console.log("clicked") in js function and it's shown in console. But still, the modal doesn't show. Can somebody show me the correct way? Thank you.

3 answers

solution1
 0 ACCPTED  2019-08-24 12:10:46

Make sure that you are importing all js files near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins, besides no need for js code. 

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

please check the below link:

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

solution2
 0  2019-08-24 12:16:05

Your code works for me. At most, remove the JS which is unnecessary.

This is a jsFiddle with your own code, minus the JS and it works just fine!

<button type="button" class="btn btn-info btn-circle btn-sm" data-toggle="modal" data-target="#editModal"><i class="fas fa-fw fa-pencil-alt"></i>Open</button>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form method="post" action="xx">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="editModalLabel">Edit</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          //Modal Body
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fas fa-times" style="margin-right:5px"></i> Cancel</button>
          <button type="submit" name="submit" class="btn btn-success"><i class="fas fa-location-arrow " style="margin-right:5px"></i> Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

solution3
 0  2020-06-07 18:17:15

This is the whole HTML-file. If that doesn't work you might have JavaScript switched of in your browser?!

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" id="btn-modal" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <button type="button" class="btn btn-info btn-circle btn-sm" data-toggle="modal" data-target="#editModal"><i
            class="fas fa-fw fa-pencil-alt"></i>Open</button>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form method="post" action="xx">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="editModalLabel">Edit</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        //Modal Body
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fas fa-times"
                                style="margin-right:5px"></i> Cancel</button>
                        <button type="submit" name="submit" class="btn btn-success"><i class="fas fa-location-arrow "
                                style="margin-right:5px"></i> Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <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>
</body>

</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Modal doesn't show bootstrap React bootstrap modal doesn't show up bootstrap-modal doesn't show the dialog Bootstrap's Modal box - background doesn't fade out on show Why the screen is faded and my bootstrap modal doesn't show up? Bootstrap modal doesn't show after prevented from being opened Bootstrap UI Angular modal doesn't show as a pop up bootstrap modal didn't show Bootstrap Modal doesn't close Bootstrap Modal doesn't popup
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM