CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
DAndre Ealy
DAndre Ealy

Reputation: 53

Bootstrap Modal not popping up

I'm really new to bootstrap and I am trying to add a popup using Modals. I added the code and the scripts, but when you click on the button its not popping up. I can tell something is coming up because the background fades a little but a popup is not coming up. So I need a little bit of help figuring out why its not popping up. 

My JavaScript links: 
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
   <script src="js/bootstrap.min.js" type="text/javascript"></script>

Code for Modals: 
<div class="modal hide fade" id="myModal">

           <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

Upvotes: 1

Views: 14661

Answers (3)

TRex22
TRex22

Reputation: 47

What I usually do for modals with just JavaScript and Bootstrap is to have an onClick event on the button that executes a JavaScript method that displays the modal.

In your HTML:

<button onclick="myFunction()">Click me</button>
<script>
    function myFunction(){
        $('#myModal').modal('show') 
    }
</script>

Just change the function name myFunction to the name you want and myModal to the id of your modal.

Here is the bootstrap docs, where the modal stuff is located, for future reference getbootstrap.com/javascript/

Upvotes: 3

Artur Filipiak
Artur Filipiak

Reputation: 9157

This is a compatibility issue v2.X vs v3.X

Bootstrap 3.0 New Classes & Elements

Modal markup has changed .modal-header .modal-body .modal-footer now get wrapped in .modal-content and .modal-dialog

Modal Migration

How to convert from a 2.x to 3.0 modal:

  • remove .hide from the .modal (it's now hidden by default)
  • wrap .modal-header .modal-body .modal-footer inside .modal-content
  • wrap .modal-content inside .modal-dialog

Events are namespaced. For example to handle the modal 'show' event, use 'show.bs.modal'.

Reference

Bootstrap 3 modal example:

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>

JSFiddle

Upvotes: 3

Nadeemmnn Mohd
Nadeemmnn Mohd

Reputation: 724

Complete Example using CDN. SO that you can download the latest version from Url 

<html>
    <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">


<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/JavaScript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="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="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    </body>
</html>

Upvotes: 0

Related Questions