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

Last updated:9/18/2014 1:24:20 PM
Anonymous User

Anonymous User

I am a content writter !

1 Comments

Leave Comment