Hi lingers,
Set Button UseSubmitBehavior to false and reopen modal popup on Button click event.
Refer below sample code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.Initial {
}
.Clicked {
background-color: brown;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id*=btnPopup]").on("click", function () {
OpenModal("Job Specification");
return false;
});
});
function OpenModal(title) {
$("#dialog").dialog({
title: title,
width: 830,
height: 500,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dialog" style="display: none">
<table align="center" border="2px"
style="width: 74%; font-family: Arial Narrow; font-size: small; font-weight: bold; font-style: normal; color: #FF0000;">
<tr>
<td>
<asp:Button ID="Tab1" runat="server" BorderStyle="None" CssClass="Initial"
OnClick="Tab1_Click" Text="Job.Desc" UseSubmitBehavior="false"
Font-Bold="True" Width="80px" Font-Names="Arial Narrow" />
<asp:Button ID="Tab2" runat="server" BorderStyle="None" CssClass="Initial"
OnClick="Tab2_Click" Text="Material Spec." Font-Bold="True"
Font-Names="Arial Narrow" UseSubmitBehavior="false" />
<asp:Button ID="Tab6" runat="server" BorderStyle="None" CssClass="Initial"
OnClick="Tab6_Click" Text="Cutting / Punch Die." Width="151px"
Font-Bold="True" Font-Names="Arial Narrow" UseSubmitBehavior="false" />
<asp:Button ID="Tab7" runat="server" BorderStyle="None" CssClass="Initial"
OnClick="Tab7_Click" Text="Offlne Production Spec." Width="172px"
Font-Bold="True" Font-Names="Arial Narrow" UseSubmitBehavior="false" />
<asp:MultiView ID="MainView" runat="server">
<h3>
<span>Job </span>
</h3>
<asp:View ID="View1" runat="server">
<table style="width: 90%; border-width: 1px; border-color: #666; border-style: solid">
<tr>
<td>
<p style="font-weight: bold">
Job Specification
</p>
<p>
<p align="center">
<asp:ImageButton ID="ImageButton3" runat="server" Height="34px"
ImageUrl="~/Images/submit.jpg" OnClick="ImageButton3_Click" Width="142px" />
</p>
<p>
<asp:Label ID="Label3" runat="server" Font-Size="XX-Small" ForeColor="Red"></asp:Label>
</p>
<p>
<table style="width: 100%; font-size: x-small; font-family: 'Arial Narrow'; font-weight: bold;" border="1"
class="roundedCorners">
<tr>
<td class="style32">Product Id</td>
<td class="style29">Description</td>
<td class="style33">Value</td>
<td class="style35">Country</td>
<td class="style35">Pack</td>
</tr>
<tr>
<td class="style32">
<asp:TextBox ID="TextBox7" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style29">
<asp:TextBox ID="TextBox8" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style33">
<asp:TextBox ID="TextBox9" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox></td>
<td class="style35">
<asp:TextBox ID="TextBox10" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox11" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style32">Customer</td>
<td class="style29">Job Number</td>
<td class="style33">Template Number</td>
<td class="style35">ADate</td>
<td class="style35">FDate</td>
</tr>
<tr>
<td class="style32">
<asp:TextBox ID="TextBox12" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style29">
<asp:TextBox ID="TextBox13" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style33">
<asp:TextBox ID="TextBox14" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox15" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox16" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
</tr>
</table>
</p>
<p>
</p>
<p>
</p>
<p>
<asp:Label ID="Label2" Visible="false" runat="server"></asp:Label>
<asp:Label ID="Label1" Visible="false" runat="server"></asp:Label>
<asp:Label ID="Label8" runat="server" Visible="false"></asp:Label>
</p>
<p>
</p>
</p>
</td>
</tr>
</table>
</asp:View>
<asp:View ID="View2" runat="server">
<table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
<tr>
<td>
<p style="font-weight: bold">
Material
</p>
<p>
</p>
<p>
</p>
<table border="1" class="roundedCorners"
style="width: 100%; font-size: x-small; font-family: 'Arial Narrow'; font-weight: bold;">
<tr>
<td class="style36"> </td>
<td class="style32">Board </td>
<td class="style29">Gsme</td>
<td class="style33">Code</td>
<td class="style35">Web</td>
<td class="style35">Cost </td>
</tr>
<tr>
<td class="style36">Board</td>
<td class="style32">
<asp:TextBox ID="TextBox27" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style29">
<asp:TextBox ID="TextBox28" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style33">
<asp:TextBox ID="TextBox29" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox30" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox31" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style36">Foil</td>
<td class="style32">
<asp:TextBox ID="TextBox32" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style29">
<asp:TextBox ID="TextBox33" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style33">
<asp:TextBox ID="TextBox34" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox35" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox36" runat="server" Width="135px" Height="24px" Font-Size="x-Small"></asp:TextBox>
</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</td>
</tr>
</table>
</asp:View>
<asp:View ID="View6" runat="server">
<table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
<tr>
<td>
<p>
<strong> DETAILS</strong>
</p>
<p>
</p>
<table border="1" class="roundedCorners"
style="width: 76%; font-size: x-small; font-family: 'Arial Narrow'; font-weight: bold;">
<tr>
<td class="style135">No</td>
<td class="style29">Template No</td>
<td class="style33">Model</td>
<td class="style35">Type</td>
<td class="style35"> Female Emb:</td>
<td class="style140"> Emb:</td>
</tr>
<tr>
<td class="style135">
<asp:TextBox ID="TextBox407" runat="server"
Width="135px"></asp:TextBox>
</td>
<td class="style29">
<asp:TextBox ID="TextBox408" runat="server" Width="135px"></asp:TextBox>
</td>
<td class="style33">
<asp:TextBox ID="TextBox409" runat="server" Width="135px"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox410" runat="server" Width="135px"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox411" runat="server" Width="135px"></asp:TextBox>
</td>
<td class="style140">
<asp:TextBox ID="TextBox412" runat="server" Width="135px"></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:View>
<asp:View ID="View7" runat="server">
<table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
<tr>
<td>
<strong> SPECIFICATION<br />
<br />
</strong>
<table border="1" class="roundedCorners"
style="width: 76%; font-size: x-small; font-family: 'Arial Narrow'; font-weight: bold;">
<tr>
<td class="style135"> Ref</td>
<td class="style29">Packaging </td>
<td class="style140">Comment</td>
<td class="style33">Geit</td>
<td class="style35">Coverage</td>
<td class="style35">Blocks</td>
</tr>
<tr>
<td class="style135">
<asp:TextBox ID="TextBox445" runat="server" Width="135px"></asp:TextBox>
</td>
<td class="style29">
<asp:TextBox ID="TextBox446" runat="server" Width="135px"></asp:TextBox>
</td>
<td class="style33">
<asp:TextBox ID="TextBox447" runat="server" Width="135px"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox448" runat="server" Width="135px"></asp:TextBox>
</td>
<td class="style35">
<asp:TextBox ID="TextBox449" runat="server" Width="135px"></asp:TextBox>
</td>
<td class="style140">
<asp:TextBox ID="TextBox450" runat="server" Width="135px"></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
</td>
</tr>
</table>
</div>
<asp:Button ID="btnPopup" runat="server" Text="Show Popup" />
</form>
</body>
</html>
Code
protected void Page_Load(object sender, EventArgs e)
{
Tab1.CssClass = "Clicked";
Tab2.CssClass = "Initial";
MainView.ActiveViewIndex = 0;
}
protected void Tab1_Click(object sender, EventArgs e)
{
Tab1.CssClass = "Clicked";
Tab2.CssClass = "Initial";
Tab6.CssClass = "Initial";
Tab7.CssClass = "Initial";
MainView.ActiveViewIndex = 0;
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "OpenModal('Job Specification')", true);
}
protected void Tab2_Click(object sender, EventArgs e)
{
Tab1.CssClass = "Initial";
Tab2.CssClass = "Clicked";
Tab6.CssClass = "Initial";
Tab7.CssClass = "Initial";
MainView.ActiveViewIndex = 1;
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "OpenModal('Material')", true);
}
protected void Tab6_Click(object sender, EventArgs e)
{
Tab1.CssClass = "Initial";
Tab2.CssClass = "Initial";
Tab6.CssClass = "Clicked";
Tab7.CssClass = "Initial";
MainView.ActiveViewIndex = 2;
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "OpenModal('DETAILS')", true);
}
protected void Tab7_Click(object sender, EventArgs e)
{
Tab1.CssClass = "Initial";
Tab2.CssClass = "Initial";
Tab6.CssClass = "Initial";
Tab7.CssClass = "Clicked";
MainView.ActiveViewIndex = 3;
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "OpenModal('SPECIFICATION')", true);
}
protected void ImageButton3_Click(object sender, ImageClickEventArgs e)
{
}
Screenshot
