user2045025
user2045025

Reputation:

bootstrap modal example

I am using twitter bootstrap js to implement the modal..... I used the online example..... Copied the html, CSS and js code into the fiddle.... but I don't see any output....

http://jsfiddle.net/nJ6Mw/

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <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>

Upvotes: 2

Views: 2287

Answers (1)

Simon C
Simon C

Reputation: 9508

You're missing something to kick-off the modal. You can either add a link to open it with your modal id referenced in the data-target attribute, or set the href target to be the modal div:

<a  role="button" class="btn" data-toggle="modal" data-target="#myModal">Launch demo modal</a>

You can use javascript to setup your Modal div as a modal target, and to open and close it also.

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
...
$('#myModal').modal(options)  <-- check the bootstrap site for possible options values.
$('#myModal').modal('show')
$('#myModal').modal('hide')

To make this work, I added the id of myModal to your modal div:

<div id="myModal" class="modal hide fade">

This is all as per the Bootstrap documentation. Maybe take a closer look at it?

Here is a working fiddle from your example. I added the boostrap stuff as external resources. http://jsfiddle.net/nJ6Mw/4/

Edit:

Adding the data-dismiss="modal" attribute will make the close button work.

<a href="#" class="btn" data-dismiss="modal">Close</a>

Upvotes: 2

Related Questions