Bootstrap - Modal isn't working

godheaper

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

derdida

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".

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

ReactJS - The modal isn' t working on the first Click

Why isn't my modal working?

Dropdown button isn't working with bootstrap 4

Custom Bootstrap carousel with thumbnails isn't working

Why isn't my bootstrap classes working?

Bootstrap dismissal isn't working in Ruby on Rails

Validation isn't working for me for a bootstrap form

bootstrap slider isn't working using dom

Bootstrap navbar collapse isn't working

bootstrap isn't working in symfony template

Bootstrap Grid isn't working properly

Bootstrap hamburger menu isn't working on phone

bootstrap: google map modal isn't working property when outside div class="container-fluid" is set "height: auto"

Dash modal popup toggle code isn't working

JavaScript insertAdjacentHTML Opening a new modal isn't working

Trying to add a CSS transition to a modal, but it isn't working as expected

Angular modal dialog isn't working and hides button/footer

Can't figure out why Bootstrap Scrollspy isn't working

Bootstrap Scrollspy isn't working, doesn't scroll

Bootstrap- jQueryvalidator plugin isn't working with modals

Responsive navigation menu with React and Bootstrap - hamburger isn't working

A {wrap}bootstrap navbar in Aurelia just isn't working right

Bootstrap navbar collapse isn't working with angular4.4.4

Bootstrap-vue dynamic toast isn't working

Bootstrap 4 grid isn't working, columns not appearing side by side

Why isn't this Bootstrap 3 column working correctly?

Bootstrap "img-responsive" isn't working in my code why?

Why Navbar Collapse isn't working for me using Bootstrap?

Bootstrap modal hide is not working