---
title: "Dialog Using BootStrap in ASP.Net"  
description: "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 Bo"  
author: "Anonymous User"  
published: 2014-01-15  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/628/dialog-using-bootstrap-in-asp-dot-net  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# 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](https://www.mindstick.com/forum/790/form-gets-submiited-twice-on-button-click) With Help [BootStrap File](https://www.mindstick.com/forum/156874/how-to-create-bootstrap-file-to-design-web-page-in-bootstrap-5)

##### 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](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) inside both <div> tag . then call dialog() [method](https://www.mindstick.com/forum/166/webservice-method). Inside $([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) () {} 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](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) and add the above three files into your [projects](https://www.mindstick.com/articles/105927/how-to-excel-at-managing-multiple-projects) because it’s

mandatory for using the bootstrap [libraries](https://answers.mindstick.com/qa/49244/which-company-is-ahead-in-classification-of-data-for-libraries-innovations) 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

![Dialog Using BootStrap in ASP.Net](https://www.mindstick.com/blogs/4c43731e-4d66-4094-9961-9be3e4d3e066/images/a5bcaec2-63d5-4b27-9887-3b019ed057b7.png)

\

in my next post i'll explain about [Vertical Menu using BootStrap in ASP.Net](https://www.mindstick.com/blog/629/Vertical%20Menu%20using%20BootStrap%20in%20ASP%20Net)

---

Original Source: https://www.mindstick.com/blog/628/dialog-using-bootstrap-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
