jQuery, Bootstrap help ?

[aoeui]

hi,

I am trying to use
http://twitter.github.com/bootstrap/javascript.html#modals

but it loads on “page load” as it seems
http://krsiak.cz/temp/css-tricks/modal/

I would like to toogle it by clicking on the Launch Modal button
kinda lost here

[seanroberts]

What button are you wanting to trigger this event?

[seanroberts]

First of all you need to give you toggle button an id. This way you can better locate this element and apply events to its object. Like so:

​Launch Modal​​

Now we can easily target this element. You can make the argument that we don’t need an id to target this element but it is A LOT simpler and faster to do it this way. Now that we can get ahold of this object we need to apply the toggle to its “click” function. JQuery makes this easy for us:

$(document).ready(function() {

$('#modalTrigger').on("click", function(){

$('#myModal').modal('toggle');

});

});

In the code before, the event to toggle that element we handled immediately after the document was ready. What you want is to assign this click event to your element immediately after the document is ready. And inside that click event, you want your toggling action.

Does that help?

[seanroberts]

That is because you are not hiding that modal window with CSS first.

You can do this with CSS or JavaScript

CSS:

#myModal {

display:none;

}

JavaScript

//inside your $(document).ready() function

$("#myModal").hide();

It is better practice and inline with the ideal MVC model to keep your style (including hiding this modal window) in your CSS.

[seanroberts]

Good to hear. No problem.

[Vermaas]

I stumbled across this problem a little while ago and used the settings of the model box (which is better than “messing” with it). Use one of those settings:

$('#myModal').modal({

show: false, // Set to false, otherwise the model will show up while loading the page

keyboard: true, // Set to true, now the window can be closed with the keyboard

backdrop: true // Set to true for creating a "black" background

});

[Author]

Posts