Home > DeveloperSection > Blogs > Dialog Using BootStrap in ASP.Net

Dialog Using BootStrap in ASP.Net


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 8089  View(s)
Rate this:

Dialog Using BootStrap in ASP.Net


In this blog , I’m explaining how to make  dialog using Bootstrap in ASP.Net

Example  :-


In This Example we Open Dialog On Button Click With Help BootStrap File

Form Design:-

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dialog.aspx.cs" Inherits="Dialog" %>

<!DOCTYPE html>

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

<head runat="server">

    <title></title>

    <script src="Js/jquery-1.8.3.min.js"></script>

    <script src="Js/jquery-ui-1.9.2.custom.min.js"></script>

    <link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

 

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <center>

          <h1>Open Dialog</h1>

      </center>

            <center>

            <div>

                <asp:Button ID="BtnShowDialog"  runat="server" Text="Show Dialog"></asp:Button>&nbsp;&nbsp;&nbsp;

                <asp:Button ID="BtnDialog"   runat="server" Text="Show Dialog Sample"></asp:Button>

            </div>

            <br />

            <div id="divDialog">

             <h3>Kamlakar Singh</h3>

                <hr />

                <p>Hello How Are You ?</p>

                <p>I am Fine And</p>

               <p>I hope You Are Also Fine.</p>

        </div>

            <div id="dialogSample">

             <h3>Pawan Shukla</h3>

                <hr />

               <p>Hello How Are You ?</p>

                <p>I am Fine And</p>

                <p>I hope You Are Also Fine.</p>

        </div>

        </center>

        </div>

    </form>

</body>

</html>

<script type="text/javascript">

    $(document).ready(function () {

        //#dialogSample

        $('input[type=submit],input[type=button]').button();

        // Dialog Link

        $('#BtnShowDialog').click(function () {

            $('#divDialog').dialog('open');

            return false;

        });

        // Modal Link

        $('#BtnDialog').click(function () {

            $('#dialogSample').dialog('open');

            return false;

        });

 

        // Dialog Simple

        $('#divDialog').dialog({

            autoOpen: false,

            width: 600,

            modal: true,

            buttons: {

                "Ok": function () {

                    $(this).dialog("close");

                },

                "Cancel": function () {

                    $(this).dialog("close");

               }

            }

        });

        // Dialog message

        $("#dialogSample").dialog({

            autoOpen: false,

            modal: true,

            buttons: {

                Ok: function () {

                    $(this).dialog("close");

                }

            }

        });

    });

</script>

 

Firstly create two button show dialog and show dialog sample then create two <div> tag and write content inside both <div> tag . then call dialog() method. Inside $(document).ready(function () {} function. On button click.

Use this BootStrap File :-

 

<script src="Js/jquery-1.8.3.min.js"></script>

<script src="Js/jquery-ui-1.9.2.custom.min.js"></script>

<link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

 

 

Download and add the above three files into your projects because it’s mandatory for using the bootstrap libraries and methods.

Use dialog Method :-

<script type="text/javascript">

 

    $(document).ready(function () {

 

        // Dialog Link

 

        $('#BtnShowDialog').click(function () {

            $('#divDialog').dialog('open');

            return false;

        });

        // Modal Link

        $('#BtnDialog').click(function () {

            $('#dialogSample').dialog('open');

            return false;

        });

 

        // Dialog Simple

 

        $('#divDialog').dialog({

            autoOpen: false,

            width: 600,

            modal: true,

            buttons: {

                "Ok": function () {

                    $(this).dialog("close");

                },

                "Cancel": function () {

                    $(this).dialog("close");

                }

            }

        });

 

        // Dialog message

        $("#dialogSample").dialog({

            autoOpen: false,

            modal: true,

            buttons: {

                Ok: function () {

                    $(this).dialog("close");

                }

            }

        });

    });

</script>

 

Output

 


in my next post i'll explain about Vertical Menu using BootStrap in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick