javascript - Bootstrap Modal not popping up - Stack Overflow

admin管理员组

文章数量:1356939

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 ing up because the background fades a little but a popup is not ing 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>

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 ing up because the background fades a little but a popup is not ing 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>

• javascript
• jquery
• css
• twitter-bootstrap

Share Improve this question Follow asked Feb 7, 2015 at 23:03 DAndre EalyDAndre Ealy 5311 gold badge11 silver badge77 bronze badges 5

• What version of bootstrap do you have? I've checked 2.3.2 click, and works fine. While it doesn't work on 3.2 - click – Artur Filipiak Commented Feb 7, 2015 at 23:11
• How can I get it to work with 3.2 @phillip100 – DAndre Ealy Commented Feb 7, 2015 at 23:19
• there is a HTML sample which works. – Artur Filipiak Commented Feb 7, 2015 at 23:20
• Its popping up, but its not letting me click on anything to close it or exits the popup. Do you think that has something to do with where its being placed on the page? @phillip100 – DAndre Ealy Commented Feb 7, 2015 at 23:35
• take look a at my answer – Artur Filipiak Commented Feb 7, 2015 at 23:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This is a patibility 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

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./javascript/

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

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


<script type="text/JavaScript" src="http://code.jquery./jquery-1.11.2.js"></script>
<script type="text/JavaScript" src="http://maxcdn.bootstrapcdn./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>

本文标签： javascriptBootstrap Modal not popping upStack Overflow