CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
scapegoat17
scapegoat17

Reputation: 5821

Cannot Get Twitter Bootstrap Modal to Work

I cant seem to get my modal working. I get the transparent overlay to show, but that is it. The content is there in a <div>, but wont show up in a modal format on the screen. Here is my code. Does anyone have any ideas?

Here is my HTML:

<a href="#modal-[nid]" class="ajax-link" data-nid="[nid]" 
  data-toggle="modal" data-target="#modal-[nid]">[title]</a>
<div id="modal-[nid]" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" 
          aria-hidden="true">×</button>
        <span>this is a test of my modal</span>
    </div>
</div>

I have never tried to implement anything like this before. I have the bootstrap CSS files loaded and the JS files. Does anyone have any ideas where I am going wrong?

---EDIT---

My exit button is not working and is looking like this:

enter image description here

It does not seem to be loading the button in the html... just shows an x with no <button> tags around it.

Upvotes: 0

Views: 92

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362300

You have a few things wrong. Take out the hide class. Wrap the body inside a modal-content and that inside a modal-dialog

<a href="#modal-1" class="ajax-link" data-nid="[nid]" data-toggle="modal" data-target="#modal-1">[title]</a>
  <div id="modal-1" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" 
            aria-hidden="true">×</button>
          <span>this is a test of my modal</span>
      </div>
    </div>
  </div>
</div>

http://www.bootply.com/124339

Upvotes: 1

Related Questions