CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
godheaper
godheaper

Reputation: 1785

Bootstrap - Modal isn't working

I Have the modal set like this

<body>
<div class="modal fade" id="pageopen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    x
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    This Modal title
                </h4>
            </div>
            <div class="modal-body">
                Add some text here
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary"> Submit changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<button onclick="showModal('http://www.google.co.id/')">Show Modal</button>

</body>

I've added the latest jquery, bootstrap js and css for only the modal plugin.
The problem I have is that the modal backdrop shows, however the modal header body and etc isn't showing up.

My Code

Please provide solution, thank you

Upvotes: 1

Views: 2602

Answers (3)

godheaper
godheaper

Reputation: 1785

Haha, never mind. I have separate js and css for the same bootstrap component so it overlapped over each other.

Tip for bootstrap :
Always load only one js file and one css file for bootstrap.
If you're like me that want's only part of the bootstrap instead of all the package, (e.g: modal, transition and carousel), then make it as one js and css from getbootstrap

Upvotes: 0

derdida
derdida

Reputation: 14904

Your Javascript Code is wrong, to open a Bootstrap 3 Modal you should use: 

$('#pageopen').modal({
        show: true
});

If you want to load an external Page, you can set the url here:

$('#pageopen').modal({
    show: true,
    remote: 'http://www.example.com'
});

And better use the jQuery click Function instead of "onClick".

Upvotes: 3

Moshtaf
Moshtaf

Reputation: 4903

Your problem is that the showModal function isn't found by onclick, please stop using onclick in your html forever. That has never been a good practice. Instead of this set an ID for button and use the .click function in JQuery:

<button id="showModal">Show Modal</button>

$("#showModal").click(function(){
    $('#pageopen').modal();
});

Check JSFiddle Demo

Upvotes: 0

Related Questions