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

  Modified On Sep-18-2014 01:24:20 PM

Leave Comment