Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap modal methods and events

Suggested Video Tutorials
Part 38 - Bootstrap accordion
Part 39 - Bootstrap accordion with arrows
Part 40 - Bootstrap modal popup



In this video we will discuss some of the useful methods and events of Bootstrap modal.



In Part 40 of Bootstrap tutorial, we have used the data-attributes to show and hide the modal. We can also manually show and hide the modal using the methods provided by Bootstrap Modal plugin.
how to open bootstrap modal popup using jquery

Methods of Bootstrap modal plugin
Method Purpose
modal('show') Shows the modal
modal(hide') Hides the modal

In the example below we have removed all the data attributes (data-toggle, data-target and data-dismiss). Instead, we are using modal('show') and modal('hide') methods to show and hide the login modal.

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap tutorial for begineers</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <br />
    <div class="container">
        <div class="row">
            <div class="col-xs-12">

                <button id="btnShowModal" type="button"
                        class="btn btn-sm btn-default pull-right">
                    Login
                </button>

                <div class="modal fade" tabindex="-1" id="loginModal"
                     data-keyboard="false" data-backdrop="static">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">
                                    &times;
                                </button>
                                <h4 class="modal-title">Login</h4>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="form-group">
                                        <label for="inputUserName">Username</label>
                                        <input class="form-control" type="text"
                                               placeholder="Login Username" id="inputUserName" />
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword">Password</label>
                                        <input class="form-control" placeholder="Login Password"
                                               type="password" id="inputPassword" />
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">Login</button>
                                <button type="button" id="btnHideModal" class="btn btn-primary">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnShowModal").click(function () {
                $("#loginModal").modal('show');
            });

            $("#btnHideModal").click(function () {
                $("#loginModal").modal('hide');
            });
        });
    </script>

</body>
</html>

Events of Bootstrap modal plugin
Event Description
show.bs.modal Fired immediately after modal('show') method is called
shown.bs.modal Fired after the modal is completely shown
hide.bs.modal Fired immediately after modal('hide') method is called
hidden.bs.modal Fired after the modal is completely hidden

The following example, handles all the bootstrap modal events
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap tutorial for begineers</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <br />
    <div class="container">
        <div class="row">
            <div class="col-xs-12">

                <button id="btnShowModal" type="button"
                        class="btn btn-sm btn-default pull-right">
                    Login
                </button>

                <div class="modal fade" tabindex="-1" id="loginModal"
                     data-keyboard="false" data-backdrop="static">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">
                                    &times;
                                </button>
                                <h4 class="modal-title">Login</h4>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="form-group">
                                        <label for="inputUserName">Username</label>
                                        <input class="form-control" placeholder="Login Username"
                                               type="text" id="inputUserName" />
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword">Password</label>
                                        <input class="form-control" placeholder="Login Password"
                                               type="password" id="inputPassword" />
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">Login</button>
                                <button type="button" id="btnHideModal" class="btn btn-primary">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnShowModal").click(function () {
                $("#loginModal").modal('show');
            });

            $("#btnHideModal").click(function () {
                $("#loginModal").modal('hide');
            });

            $('#loginModal').on('show.bs.modal', function () {
                alert('Modal is about to be displayed');
            });
            $('#loginModal').on('shown.bs.modal', function () {
                alert('Modal is displayed');
            });

            $('#loginModal').on('hide.bs.modal', function () {
                alert('Modal is about to be hidden');
            });
            $('#loginModal').on('hidden.bs.modal', function () {
                alert('Modal is hidden');
            });
        });
    </script>

</body>
</html>

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.