CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Lord Vermillion
Lord Vermillion

Reputation: 5414

perform data-toggle with jquery

I have a button that toggles a bootstrap modal.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

I want to do the same thing with a jquery function. Is this possible?

Upvotes: 19

Views: 77282

Answers (5)

MKZ
MKZ

Reputation: 186

Just a simple $("#myModal").modal() in any function of your choice

Upvotes: 5

Snake Eyes
Snake Eyes

Reputation: 16754

With simple code like you posted:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

It won't show modal dialog unless you write code in javascript like:

$("button").on("click", function(){
  $($(this).attr("data-target")).modal("show");
});

And what you will put in data-target will open a div with id as dialog modal.

or

$("button").on("click", function(){
  $($(this).data("target")).modal("show");
});

Upvotes: 25

sridharnetha
sridharnetha

Reputation: 2238

below code worked for me, you can call this function on any event

 <script type="text/javascript">
    $(document).ready(function () {
        ShowModel = function () {
            $("#myModal").modal();
        }
    });
</script>

Upvotes: 9

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

give your button id and hide it:

CSS:

#btnTrigger
{
display:none;
}

HTML:

<button class="btn btn-primary btn-lg" id="btnTrigger" data-toggle="modal" data-target="#myModal">

and on someother event or condition just click it programmatically:

JQuery:

$('#btnTrigger').click();

In Result, popup will be displayed.

Upvotes: 28

Yaron
Yaron

Reputation: 1620

Maybe you should read this explanation about the "data-" html5 attribute.

You can define custom data- attributes and use them when developing your plugins.

This is what bootstrap did.

If you want to use it in JQuery to show a modal dialog - you should write a plugin similar to what bootstrap did.

I suggest you read bootstrap's source code and see how they used this attribute.

Upvotes: 0

Related Questions