Open Bootstrap Modal Popup using Jquery

-

 

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to open Bootstrap Modal Popup Window by click of button on webpage by using Jquery. This article will work in Bootstrap version 3.

Code for HTML Page

Inside the HTML page I will place a control named INPUT Button with the id named button_Popup

<input type="button" id="button_Popup" value="Open  Popup" class="btn btn-info btn-lg" />

Inside the HTML page I will inherit the Bootstrap 3 CSS file named bootstrap.min.css. I will also inherit the Bootstrap 3 named bootstrap.min.js and jQuery JS files named jquery.min.js. I will also place a HTML DIV on the HTML page to apply with Bootstrap 3 Modal Popup plugin.

<!-- Bootstrap -->

<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />

<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>

<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>

<!-- Bootstrap -->       

<!-- Modal Popup -->

<div id="MyPopup" class="modal fade" role="dialog">

    <div class="modal-dialog">

        <!-- Modal content-->

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title"></h4>

                <button type="button" class="close" data-dismiss="modal">

                    &times;</button>

            </div>

            <div class="modal-body">

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">

                    Close Popup</button>

            </div>

        </div>

    </div>

</div>

<!-- Modal Popup -->

 

 

Open Bootstrap Modal Popup Window using jquery

Inside the Jquery document ready event handler, the Button has been. On the button control of HTML page, I will assigned a Jquery Click event handler inside the Jquery document ready event handler. Inside this Click event handler, first the title and body values are set in their respective HTML DIVs and the Bootstrap Modal Popup Window will be open using jquery function.

<script type="text/javascript">

    $(function () {

        $("#btnShowPopup").on('click', function () {

            var title = "Greetings";

            var body = "Welcome to ASPSnippets.com";

            $("#MyPopup .modal-title").html(title);

            $("#MyPopup .modal-body").html(body);

            $("#MyPopup").modal("show");

        });

    });

</script>

Now here i am giving complete code for the HTML page. You can copy and paste the whole code on your HTML page. And enjoy the execution of the program on your system.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        body

        {

            padding: 10pt !important;

        }

    </style>

</head>

<body>

    <!-- Bootstrap -->

    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>

    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'>

    </script>

    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'

 

        media="screen" />

    <!-- Bootstrap -->

    <center>

        <input type="button" id="button_popup" value="Show Popup" class="btn btn-info btn-lg" />

    </center>

    <!-- Modal Popup -->

    <div id="MyPopup" class="modal fade" role="dialog">

        <div class="modal-dialog">

            <!-- Modal content-->

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal">

                        &times;</button>

                    <h4 class="modal-title">

                    </h4>

                </div>

                <div class="modal-body">

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-danger" data-dismiss="modal">

                        Close</button>

                </div>

            </div>

        </div>

    </div>

    <!-- Modal Popup -->

    <script type="text/javascript">

        $(function () {

            $("#button_popup").click(function () {

                var title = "Welcome to All";

                var body = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s";

 

                $("#MyPopup .modal-title").html(title);

                $("#MyPopup .modal-body").html(body);

                $("#MyPopup").modal("show");

            });

        });

    </script>

</body>

</html>

 

Conclusion: In above code, I explained that how to open Bootstrap Modal Popup Window by click of button on webpage using by using Jquery. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Using Asp.net

 

 

Comments

Post a Comment

Popular posts from this blog

Sending reset password link for one time use only in asp.net

-
Introduction: Hello developers, in this article i will explain that how we can create and send reset password link that will use onle one time in asp.net,after one time use this link will dispose and say that this link is wrong. This is very helpful article for every .net developer Implementation: Create two pages named forgetpassword.aspx and reset.aspx. Paste the code that below am giving, separately inside the both pages. This is a sample program you can change it accoring to your requirement. Inside your table there will be a colimn named code is necessary. Code for forgetpassword.aspx page: < head runat ="server">     < title > Forget Password </ title >     < style type ="text/css">         .style1         {             width : 100% ;  ...
Read more

add delete update inside gridview using store procedure in ASP.NET

-
Image
Introduction: Hello friends, in this article i will explain that how we can insert,delete,update the data in the gridview. Here i am using the store procedure to insert,delete and update the record. With the help of the store procedure the execution of the sql  query make fast. And less  the code of the aspx.cs page. So we can say  the use of the store procedure in the sql server is very important and also very helpful. Implementation: create a new website abb a page named gallery.aspx. Drag and drop the two textboxes, a fileuploader and a button from the toolbox named txt_album_name, txt_caption, fileuploader1 and btn_insert respectively. Here i am giving the complete code for the html page.  Code for .aspx page: < table class ="style1">         < tr >             < td class ="style2">      ...
Read more

Change password using asp.net

-
Image
Introduction : Hello friends, in this article i will explain that how we can change the password after login, in asp.net.This article is very useful for the all the .net developer. Implementation : create a new website add a page. Drag and drop three textboxes and two buttons   from the toolbox inside the   < body > body tag at the .aspx page.   Below   i am giving the complete code for the html page and .cs page.  Code for default.aspx page < div >     < table style =" width : 91% ; height : 97px ; " class ="tbl_reg_form">         < tr >             < td >                 Old Password </ td >             < td >        ...
Read more