1

My intention with my script is that the modal dialog should only show up after you click a link. Unfortunately, it keeps popping up immediately upon page load. I've included a jsFiddle, and the relevant snippets. What am I doing wrong?

http://jsfiddle.net/rajkumart08/y88WX/25/

jQuery:

$(document).ready(function(){ $(function() { $('#event-modal').modal({ backdrop: true }); }); });

HTML:

<div id="event-modal" class="modal hide fade"> <div class="modal-header"> <a class="close" href="#">x</a> <h3>Modal Heading</h3> </div> <div class="modal-body"> <p>Some information</p> </div> <div class="modal-footer"> <a class="btn primary" href="#">Primary</a> <a class="btn secondary" href="#">Secondary</a> </div> </div> <a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">click to open model<span class="ico join"></span></a>
Improve this question
3
  • Your jFiddle is working for me in Firefox. The modal opens after clicking the link. Commented Mar 4, 2013 at 17:51
  • jsfiddle.net/rajkumart08/y88WX/25 sorry posted wrong fiddle Commented Mar 4, 2013 at 17:55
  • That is happening cause you loading that modal as soon as DOM ready.Put that code inside a onclick handler.It will work as you expected.By the way you have seperate HTML , JS and CSS in jsfiddle.You have mixed up everything in the above link. Commented Mar 4, 2013 at 18:02

1 Answer 1

Reset to default
1

First, $(document).ready(function(){}) and $(function(){}) are the same thing, so you only need one.

Second, your HTML for the modal window uses data attributes, so you don't need to call it with javascript. Delete the javascript and it should work fine.

If it still doesn't work I suggest you read over the documentation on Bootstrap. You can even copy and paste the example then customize to fit your needs.

Your code is fine with the data attributes, but change the modal's close button to use this:

 <a class="close" href="#" onclick="$('#event-modal').modal('hide')">x</a>

I'd also like to suggest that next time you post a fiddle, please separate the javascript, CSS and HTML into their respective sections. If you break it down and keep it to the pertinent content only, you might discover the error/bug early on.

For other users,

Via Javascript:

Change your code add the following option to hide it from the start:

$(function(){ $('#event-modal').modal({ backdrop: true, show: false }); });

Then to show it, use this javascript:

$('#event-modal').modal('show');

To make it hide use this:

$('#event-modal').modal('hide');
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments