Search code examples
javascriptjqueryhtmlsimplemodal

Start simplemodal on page load

I am coding a little web page and I want to start simplemodal on the start of loading the page.

So now i have this code in body

<div id='container'>
    <div id='content'>
        <div id='basic-modal'>
            <input type='button' name='basic' value='Open' class='basic'/>
        </div>

        <!-- modal content -->
        <div id="basic-modal-content">
            <h3>Random Text in the SompleModal box.</h3>

        </div>
    </div>
</div>

You can see the button as a input, when i click it the box poppes up and there is the text.

Here also the basic.js, but i dont understand it, because i started learning Web Designing a few days ago.

basic.js

jQuery(function ($) {
    // Load dialog on page load
    //$('#basic-modal-content').modal();

    // Load dialog on click
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();

        return false;
    });
});

also included are these files.

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>

I read that it it possible to use onLoad or in jscript .ready but i dont know how.

Solution

  • Try with this:

    <script>
function openModal() 
{
    $('#basic-modal-content').modal();
}
</script>

<body onload="openModal();"></body>