CODEWITHSUNDEEP
jquerytwitter-bootstrap
J.Olufsen
J.Olufsen

Reputation: 13905

JQuery bootstrap modal dialog is not displayed

I need to display sign up form in modal window using Bootstrap template.

My sample should be opened by pressing [R] element but it's not. However in the example (http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php) it does.

The attribute seems not to be working correctly in my example: 

data-toggle="modal"

Why?

Code: http://jsfiddle.net/Mfc7M/

<!DOCTYPE html>
<title>Twitter Bootstrap Modals Example</title>
<body>
    <div id="reg-model-dialog" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">  <a class="close" data-dismiss="modal">×</a> 
                <h3>Registration</h3> 
        </div>
        <div class="modal-body">
            <table id="search-tbl">
                <tr>
                    <td>Email:</td>
                    <td>
                        <input type="text" name="reg-email" id="reg-email" />
                    </td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td>
                        <input type="text" name="reg-pwd" id="reg-pwd" value="" />
                    </td>
                </tr>
            </table>
        </div>
        <div class="modal-footer">  <a href="#" class="btn btn-success">Call to action</a>  <a href="#" class="btn" data-dismiss="modal">Close</a> 
        </div>
    </div>  <a data-toggle="modal" href="#regstration" class="btn btn-primary btn-large" id="reg-dialog-btn">R</a>

AND

$(document).ready(function () {

    //$("#reg-model-dialog").modal();
    /*   $('#reg-dialog-btn').click(function(){
                                                $('#reg-model-dialog').css('display','inline');
                                             }); */

});

Upvotes: 1

Views: 963

Answers (2)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70129

If you want a JS solution:

$('#reg-dialog-btn').click(function () {
    $('#reg-model-dialog').modal('show');
});

Fiddle

In this case, the #reg-dialog-btn's data-* attributes are unnecessary.

The Bootstrap Modal's show, hide and toggle methods are documented here.

I personally dislike putting too many data-* attributes in the HTML as it mixes structure with behavior, but setting a data-target or href attribute to "#reg-model-dialog" as in @Pigueiras' solution will work fine too.

Upvotes: 2

Pigueiras
Pigueiras

Reputation: 19356

The href attribute is wrong, you have to make reference to the modal ID. In your case, the R button should be: 

<a data-toggle="modal" href="#reg-model-dialog" class="btn btn-primary btn-large" 
         id="reg-dialog-btn">R</a>

Instead of: 

<a data-toggle="modal" href="#regstration" ...></a>

You can look at it working here: Jsfiddle

Upvotes: 1

Related Questions