Bootsrap Modal to trigger on page load, once per user

Question

I have the following code to place inside my Bootstrap based WordPress theme that I would like to open on the page load instead of a button click and to only load once per user on their first visit to the site.

The code:

<div class="container">
    <div class="row">
        <div class="span12">
            <a data-toggle="modal" class="btn" href="#loginModal">Log in</a>

            <div class="modal hide" id="loginModal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">✕</button>
                    <h3>Login to Website</h3>
                </div>
                    <div class="modal-body" style="text-align:center;">
                    <div class="row-fluid">
                        <div class="span10 offset1">
                            <div id="modalTab">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="login">
                                        <form method="post" action='' name="login_form">
                                            <p><input type="text" class="span12" name="eid" id="email" placeholder="Email"></p>
                                            <p><input type="password" class="span12" name="passwd" placeholder="Password"></p>
                                            <p><button type="submit" class="btn btn-primary">Sign in</button>
                                            <a href="#forgotpassword" data-toggle="tab">Forgot Password?</a>
                                            </p>
                                        </form>
                                    </div>
                                    <div class="tab-pane fade" id="forgotpassword">
                                        <form method="post" action='' name="forgot_password">
                                            <p>Hey this stuff happens, send us your email and we'll reset it for you!</p>
                                            <input type="text" class="span12" name="eid" id="email" placeholder="Email">
                                            <p><button type="submit" class="btn btn-primary">Submit</button>
                                            <a href="#login" data-toggle="tab">Wait, I remember it now!</a>
                                            </p>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks,

Answer 1

You can open modal with below code in ready function

$('#myModal').modal();

And if you want to add per user then you need to set cookie on load. then check whether that cookie is set or not. if set then don't load modal and if not set then load modal.

Find Cookie reference here It's too easy. you will find set, read and erase cookie function in given URL.