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>
<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
Thanks for the help.