Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

modal function not working on bootstrap 4.0.0-beta

See original GitHub issue

TypeError: $(…).modal is not a function error after implementing the modal feature on bootstrap 4.0.0-beta

jquery with bootsrap loading sequence has been checked, everything is loading well
jquery version 3.1.1

$("#clickme").click(function (e) {
                    e.preventDefault;
                    $('#exampleModal').modal('show')

                })

<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-la    bel="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="form-control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name" value="rsdftrtytrere">
          </div>
          <div class="form-group">
            <label for="message-text" class="form-control-label">Message:</label>
            <textarea class="form-control" id="message-text">dffgffgddssfdghjgfd</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>

<a href="#" id="clickme" class="btn btn-primary">Stock Category</a>

i fixed the issue by copying out the loaded bootstrap js and css file on bootstrap website for it to work

Issue Analytics

State:
Created 6 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

jadvillafaniacommented, Oct 23, 2017

I encountered this error too using bootstrap 4.0-beta.2 and popper 1.12.6. To solve the issue, I have to use this declaration: window.Popper = require('popper.js'); not just require('popper.js');

1reaction

Johann-Scommented, Sep 24, 2017

I don’t see any issue here, you just have to be sure you loaded Bootstrap after jQuery and Popper.js that’s all 👍

Top Results From Across the Web

Why does my modal not work? Bootstrap4 - Stack Overflow

I literally copy and paste from the Bootstrap 4 website (http://v4-alpha.getbootstrap.com/components/modal/#live-demo) Also, I have added js that they say.

Modal not working - Bootstrap Studio Help

It is a play project that has an 'Add Post' button which when I click, a Modal form should appear. The problem is...

Modal - Bootstrap

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Modal · Bootstrap v5.2

You'll likely run into issues when nesting a .modal within another fixed element. ... Toggle a working modal demo by clicking the button...

Bootstrap 4.0.0-beta modal won't work. Popper.js is breaking

I am creating a button to open up a modal when clicked. <--Modal trigger--> <button type="button" data-toggle="modal" data-target="#myModal">Create a new ...