enable anchor in twitter bootstrap modal

Question

I have a bootstrap modal that works perfect.

The header/body/footer of the modal is filled with the right data. Inside the modal body I have some content with links to other pages, but for some reason they are ”like” disabled.

I guess bootstrap applies the event.preventDefault(); to all the links inside the modal body, or something similar.

Is there a way to re-enable them?

HTML:

<div class="modal show fadein static-modal" id="singlePageBox" data-show="true" data-backdrop="true" data-toggle="modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h2 id="myModalLabel">dummy header</h2>
        </div>
        <div class="modal-body">
            <p>Lorem Ipsum is <a href="http://google.com" target="_blank" class="ext_link">It was popularised</a> in.</p>
        </div>
        <div class="modal-footer"> </div>

An example of what I mean http://jsfiddle.net/kulldox/ft3zX/

Solution 1

It might be in the way you are marking up your modal. Could also be some custom JS that you are using in your project. Notice I didn't apply the .ext_link class not did I use any custom JS to get the anchor to work.

Check this working example

It's a simple copy and paste from the documentation. Please note that this is Bootstrap 2.3.2

HTML:

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body... <a href="http://google.com" target="_blank">Go to Google with this Anchor</a></p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Solution 2

OMG, found the problem. Looks like morning brains are better than late night :)

For some reason I've set the data-toggle="modal" on the modal container. Certainly this disables the links because it should trigger the modal itself.

Removing that, fixed the problem. Here is the fixed jsfiddle.

http://jsfiddle.net/kulldox/ft3zX/3/

sulfureous, thanks for pushing me back to documentation ;)

Comments

[Shaunak]

are you sure its not just jsfiddle doing it? Because I tried it on a separate html page and it works fine.

[sulfureous]

Its not jsFiddle doing it, check my answer and the fiddle, it works fine.

[Shaunak]

try using show and static-modal classes for your modal. That is what is being used in the question. Your example doesn't match. Try the above example in jsfiddle and let me know if it works for you.