jQuery .click() not working on ajax modalpopupextender button click - javascript

I have to invoke ImageButton (in repeater footer) click event from jQuery on response to ajax modalpopupextender button. I tried the below code but it's not working. It doesn't throw any error but PostBack is not happening.
var isCurrentPortalFormSaveClicked = false;
var controlsValuesOnload = '';
var controlsValuesWhileExit = '';
window.onbeforeunload = beforeUnload;
window.onload = getValues;
function getValues() {
controlsValuesOnload = $('form').serialize();
}
function beforeUnload() {
if (isCurrentPortalFormSaveClicked == true) return;
controlsValuesWhileExit = $('form').serialize();
if (controlsValuesOnload != controlsValuesWhileExit) {
return "Your changes have not been saved. To stay on the page so that you can save your changes, click Cancel.";
}
}
function confirmExit(callBackMethod, saveButtonId) {
controlsValuesWhileExit = $('form').serialize();
if (controlsValuesOnload != controlsValuesWhileExit) {
return ShowUnSavedChangesWarning(callBackMethod,saveButtonId);
}
else {
window.open('', '_self', '');
window.close();
return false;
}
}
function ShowUnSavedChangesWarning(callBackMethod, saveButtonId) {
saveButtonControl = saveButtonId;
callBack = callBackMethod;
$find('<%= modalPopUpConfirmExitWarning.ClientID %>').show();
return true;
}
function saveFormAndClose() {
HideUnSavedChangesWarning();
if (callBack != '' && callBack != null && callBack != undefined) {
return callBack();
}
else if (saveButtonControl != '' && saveButtonControl != undefined) {//if the control is other than ribbon save and close button.
saveButtonControl.click();
window.open('', '_self', '');
window.close();
}
else if ($('.saveandclose') != null && $('.saveandclose') != '' && $('.saveandclose') != undefined) {
$('.saveandclose')[0].click();
}
return false;
}
function closeForm() {
isCurrentPortalFormSaveClicked = true;
window.open('', '_self', '');
window.close();
return false;
}
function SaveNewNotes() {
//Save Notes
var notes = $('.newNote').first().val();
if (notes != null && notes != "") {
$('.saveNotes')[0].click();
}
return true;
}
ASPX:
<ajax:ModalPopupExtender ID="modalPopUpConfirmExitWarning" CancelControlID="btnCancel"
runat="server" PopupControlID="panelConfirmExitWarning" TargetControlID="btnHiddenConfirmExitWarning"
BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Button runat="server" ID="btnHiddenConfirmExitWarning" Style="display: none" />
<asp:Panel ID="panelConfirmExitWarning" runat="server" Style="display: none" CssClass="ModalWindow">
<div class="window_header">
<span id="spanSubscirptionWindowHeader" runat="server" />
</div>
<div class="window_body">
<img src="../Images/Icon_Warning_New.png" />
<span id="spanConfirmExitExpiryWarning" runat="server" />
</div>
<div class="window_footer" align="right">
<asp:Button ID="btnSave" runat="server" Text="<%$ Resources:DealerWebPortal, DWP_SPAN_Ribbon_Save %>"
OnClientClick="return saveFormAndClose();" CssClass="popUp_button" />
<asp:Button ID="btnDontSave" runat="server" Text="<%$ Resources:DealerWebPortal, DWP_BTN_Page_Home_DontSave %>"
OnClientClick="return closeForm();" CssClass="popUp_button" />
<asp:Button ID="btnCancel" runat="server" Text="<%$ Resources:DealerWebPortal, DWP_BTN_Page_DealerEmailSubscription_Cancel %>"
CssClass="popUp_button" />
</div>
</asp:Panel>
Button (to trigger modalpopupextender):
<a id="lnkClose" class="close" runat="server" onclick="isCurrentPortalFormSaveClicked=true;return confirmExit(SaveNewNotes,null);"> </a>
Repeater:
<asp:Repeater runat="server" ID="rptrCaseNotes" OnItemCommand="rptrCaseNotes_ItemCommand">
<FooterTemplate>
<table>
<tr style="width: 650px">
<td style="vertical-align: middle; width: 50px">
<asp:ImageButton ID="AddNote" Width="16px" Height="16px" ImageUrl="~/Images/112_Plus_Blue_32x32_72.jpg"
runat="server" CommandName="Add" OnClick="OnAddNotes" OnClientClick="isCurrentPortalFormSaveClicked=true" CssClass="saveNotes" />
</td>
<td style="width: 600px">
<asp:TextBox runat="server" ID="NewNotes" Rows="6" Width="600px" Height="80px" TextMode="MultiLine"
MaxLength="2000" CssClass="newNote" />
</td>
</tr>
</table>
</FooterTemplate>

Related

UserControl CustomValidator calling external Javascript

I have a User Control with a Datagrid. I need to check some Textboxes within by calling my Javascript File doing the compare when the user will Save its modifications. (it will trigger my validator, if it is wrong a popup will show)
My ASPX:
<script type="text/javascript" src='/scripts/production_cost.js'></script>
<ContentTemplate>
<asp:DataGrid ID="ProdCostGrid" runat="server" AutoGenerateColumns="False" BorderColor="#f0f0f0" BorderStyle="None" BorderWidth="0px" CellPadding="0">
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<Columns>
<asp:BoundColumn Visible="False" DataField="Id" HeaderText="Id"></asp:BoundColumn>
<asp:TemplateColumn>
<ItemTemplate>
Amount: <asp:TextBox ID="ProductionCostLineField" Text='<%# ToText(Eval("ProductionCostEuro")) %>'
TabIndex="24" runat="server" Width="80px" MaxLength="13"></asp:TextBox> EUR
</ItemTemplate>
<ItemStyle Width="170px" HorizontalAlign="Right"></ItemStyle>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
//here I am suppose to put my Validator
<asp:CustomValidator ID="AmountCustomValidator" runat="server" Display="None" ErrorMessage="Amount must be filled" ClientValidationFunction="ValidateAmount" />
</ContentTemplate>
My Javascript in a different folder :
function ValidateAmount(source, args) {
args.IsValid = true;
$('input[id*="ProductionCostLineField"]').blur(function () {
var amount = this.value;
$('input[id*="ProductionCostInvoiceToLineField"]').each(function () {
var textInvoicedBy = this.value;
if (amount == '' || amount == '0') {
} else {
if (this.value != '' || amount == '' || amount == '0') {
args.IsValid = true;
}
if ((amount != '' || amount != '0') && textInvoicedBy == '') {
alert("You must inform the field 'Invoiced By'");
args.IsValid = false;
}
}
});
});
}

hide div from update panel in asp.net

All the code is working but only one problem is that div can not hide after button click event is fire.
how to hide "addresspopup" div after button "btnAddress" is click.
I have use update panel in div block.
Below is my code please help as soon as possible.
page.aspx
<head>
<script type="text/javascript">
function Validate() {
document.getElementById("btnPincode").click();
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).keyup(function(e) {
if (e.keyCode == 27) { // esc keycode
$('#addresspopup').hide();
}
});
});
function DisplayOption(options)
{
if(options=='Address'){
$("#addresspopup").show();
return true;
}
if(options=='AddressClose'){
$("#addresspopup").hide();
return true;
}
}
</script>
</head>
<body>
<a id="addnewaddress" href="#" onclick="javascript:DisplayOption('Address');" class="button_black big_btn fullscreen-container">Add New Address</a>
<div id="addresspopup" style="display:none;" runat="server">
<div class="arcticmodal-overlay" style="opacity: 0.6; background-color: rgb(0, 0, 0);"></div>
<div class="arcticmodal-container">
<div class="arcticmodal-container_i">
<div>
<div class="arcticmodal-container_i2">
<div id="addresspopup_mw" class="modal_window">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<a onclick="javascript:DisplayOption('AddressClose');" class="close arcticmodal-close"></a>
<header class="on_the_sides">
<div class="left_side">
<h4>Enter a new shipping address</h4>
</div>
</header><!--/ .on_the_sides-->
<div class="type_2">
<div id="errorpincode1" runat="server" visible="false" class="alert_box error mar-bottom10">
<asp:Label ID="lblErrorpincode1" runat="server" Text="Error"></asp:Label>
</div>
<ul>
<li>
<asp:TextBox ID="txtAddressName" runat="server" placeholder="Your name *"></asp:TextBox>
</li>
<li>
<asp:TextBox ID="txtAddress" runat="server" placeholder="Address *" Rows="4" TextMode="MultiLine"></asp:TextBox>
</li>
<li>
<asp:TextBox ID="txtLandmark" runat="server" placeholder="Landmark"></asp:TextBox>
</li>
<li>
<asp:TextBox ID="txtPincode" runat="server" MaxLength="6" OnBlur="javascript:Validate()" placeholder="Pincode *"></asp:TextBox>
<asp:Button ID="btnPincode" runat="server" Text="Button" onclick="btnPincode_Click" style="display:none" ></asp:Button>
</li>
<li>
<asp:TextBox ID="txtCity" runat="server" placeholder="City *"></asp:TextBox>
</li>
<li>
<asp:DropDownList ID="ddlState" runat="server" class="mar-bottom5">
</asp:DropDownList>
</li>
<li>
<asp:TextBox ID="txtPhone" runat="server" placeholder="Phone *"></asp:TextBox>
</li>
<li class="v_centered pad-top-10">
<asp:Button ID="btnAddress" runat="server" class="button_black big_btn fullscreen-container" Text="Save & Continue" OnClick="btnAddress_Click"></asp:Button>
</li>
</ul>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddress" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
page.cs file
protected void btnAddress_Click(object sender, EventArgs e)
{
if (txtAddressName.Text == "")
{
lblErrorpincode1.Text = "Please enter your Full Name";
errorpincode1.Visible = true;
SetFocus(txtAddressName);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtAddress.Text == "")
{
lblErrorpincode1.Text = "Please enter your Full Address";
errorpincode1.Visible = true;
SetFocus(txtAddress);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtPincode.Text == "")
{
lblErrorpincode1.Text = "Please enter your Pincode";
errorpincode1.Visible = true;
SetFocus(txtPincode);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtCity.Text == "")
{
lblErrorpincode1.Text = "Please enter your City";
errorpincode1.Visible = true;
SetFocus(txtCity);
return;
}
else
{
errorpincode1.Visible = false;
}
if (ddlState.SelectedIndex == 0)
{
lblErrorpincode1.Text = "Please select your State";
errorpincode1.Visible = true;
SetFocus(ddlState);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtPhone.Text == "")
{
lblErrorpincode1.Text = "Please enter your Phone Number";
errorpincode1.Visible = true;
SetFocus(txtPhone);
return;
}
else
{
errorpincode1.Visible = false;
}
string pin = " AND Pincode = " + txtPincode.Text + " ";
DataTable dt = bll.getCustomDeliverySearch(pin);
if (dt.Rows[0][5].ToString() == "False")
{
lblErrorpincode1.Text = "As of now we DO NOT Deliver at this Address. Please add Another Address.!";
errorpincode1.Visible = true;
return;
}
else
{
errorpincode1.Visible = false;
}
DateTime created;
DateTime modified;
created = DateTime.ParseExact(DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss tt"), "MM/dd/yyyy hh:mm:ss tt", System.Globalization.CultureInfo.InvariantCulture);
modified = DateTime.ParseExact(DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss tt"), "MM/dd/yyyy hh:mm:ss tt", System.Globalization.CultureInfo.InvariantCulture);
// QUERY for insert data here
Session["Name"] = FixString(txtAddressName.Text);
Session["Address"] = FixString(txtAddress.Text) + ", " + FixString(txtLandmark.Text);
Session["City"] = txtCity.Text;
Session["Pincode"] = txtPincode.Text;
Session["State"] = ddlState.SelectedValue;
Session["Mobile"] = txtPhone.Text;
BindData();
addresspopup.Attributes.Add("Style", "display:none;");
}
You can make a async call using ScriptManager during postback to hide your div section.
CodeBehind:
ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "hideaddress", "javascript: $(function(){ hideAddress(); });", true);
Aspx
<body>
<div> ... </div>
<script type="text/javascript">
function hideAddress() {
$('#addresspopup').hide();
}
</script>
</body>
Add a script block above end of body tag. Also you need to comment out following line and use above mentioned code.
addresspopup.Attributes.Add("Style", "display:none;");

Javascript validation doesn't work when a wrong value entered before

Guys I have a form like this(an aspx page): http://prntscr.com/8tmvge . I wrote validations each of them,And it is working properly. If user enter numeric value in name textbox (ex),it gives error and I'm clearing that textbox(only that textbox) but enter the accurate value and pressing send button, none of the validations and click events doesn't triggered.I couldn't understand how can I fix this? code is below:
Ekle.aspx:
<form id="form1" runat="server">
<div id="ekle">
<asp:Table ID="Table1" runat="server">
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell>Id:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txt1" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt1" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow2" runat="server">
<asp:TableCell>Name:</asp:TableCell><asp:TableCell>
<asp:TextBox ID="txt2" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txt2" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow3" runat="server">
<asp:TableCell>Surname:</asp:TableCell><asp:TableCell>
<asp:TextBox ID="txt3" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txt3" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow4" runat="server">
<asp:TableCell>Sex:</asp:TableCell>
<asp:TableCell>
<span id="spanddl">
<asp:DropDownList ID="ddl1" runat="server">
<asp:ListItem Value="Bay">Bay</asp:ListItem>
<asp:ListItem Value="Bayan">Bayan</asp:ListItem>
</asp:DropDownList>
</span>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow5" runat="server">
<asp:TableCell>Email:</asp:TableCell><asp:TableCell>
<asp:TextBox ID="txt5" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txt5" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow6" runat="server">
<asp:TableCell>City:</asp:TableCell><asp:TableCell>
<asp:TextBox ID="txt6" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txt6" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow7" runat="server">
<asp:TableCell>Age:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txt7" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txt7" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<input id="ekle_gonder" type="button" value="Gönder" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</form>
ekle.js :
$(document).ready(function () {
var result = 1;
var id, name, surname, email, city, age;
$("#content").on('click', "#ekle_gonder", function (e) {
var gender = $("#ddl1 option:selected").text();
//var gender = document.getElementById('<%= ddl1.ClientID%>');
//var gender2 = gender.options[gender.selectedIndex].value;
check();
var obj = {};
obj.Id = id;
obj.Name = name;
obj.Surname = surname;
obj.Sex = gender;
obj.Email = email;
obj.City = city;
obj.Age = age;
if (result == 1) {
$.ajax({
type: "post",
url: "ShowRecord.aspx/ekle_func",
contentType: "application/json;charset:utf-8",
data: JSON.stringify(obj),
dataType: "json",
success: onSuccess,
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
//complete:printAgain()
});
}
});
function check() {
var mailregex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
var textregex = /^[A-Za-z çğıöşü]{1,25}$/;
var numregex = /(^\d+$)/;
id = $("#txt1").val();
name = $("#txt2").val();
surname = $("#txt3").val();
email = $("#txt5").val();
city = $("#txt6").val();
age = $("#txt7").val();
if ((numregex.test(parseInt(id)) == false) || (parseInt(id) < 0)) {
open_error_box("#ekle_id_error", "#txt1");
}
if ((name == '') || (textregex.test(name) == false)) {
open_error_box("#ekle_name_error", "#txt2");
}
if ((surname == '') || (textregex.test(surname) == false)) {
open_error_box("#ekle_surname_error", "#txt3");
}
if ((email == '') || (mailregex.test(email) == false)) {
open_error_box("#ekle_email_error", "#txt5");
}
if ((city == '') || (textregex.test(city) == false)) {
open_error_box("#ekle_city_error", "#txt6");
}
if ((numregex.test(parseInt(age)) == false) || (parseInt(age) < 0) || (parseInt(age) > 100)) {
open_error_box("#ekle_age_error", "#txt7");
}
return result;
}
function open_error_box(error_name, name) {
$(error_name).dialog("open");
$(name).val('');
result = 0;
}
function onSuccess() {
$("#txt1").val('');
$("#txt2").val('');
$("#txt3").val('');
$("#txt4").val('');
$("#txt5").val('');
$("#txt6").val('');
$("#txt7").val('');
}
$(function () {
$("#ekle").dialog();
$("#ekle_id_error ,#ekle_name_error, #ekle_surname_error, #ekle_email_error, #ekle_city_error, #ekle_age_error").dialog(
{
autoOpen: false,
buttons: [{
text: "OK",
click: function () { $(this).dialog("close"); }
}]
});
});
});
By the way the id='content' selector is in another page.I'm loading Ekle.aspx into a div(in ShowRecord.aspx) when pressed 'ekle' button(inside ShowRecord.aspx again).ANd error dialog boxes are in ShowRecord.aspx also.
When you clear the textbox, you should change the result value as 1. Your result value just set as 1, when the document is ready. However, if there is something is wrong, you set it as 0, then you never change it as 1.

How to use the Jquery Shake effect on Button click?

What i want to do is to shake the textbox if the textbox is empty. But i a unable to do this.
What i am doing is as follows :
$("#BtnSubmit").click(function() {
if ($("#txt1").val() == '' || $("#TextBox1").val() == '' || $("#TextBox2").val()) {
$("#txt1").effect("shake")
}
});
<div id="keepTextBox">
<asp:TextBox ID="txt1" ForeColor="White" runat="server" Height="30px" Style="background-color: #46375E;"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="txt1" ID="rftxt1" runat="server" SetFocusOnError="true"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox1" ForeColor="White" runat="server" Height="30px" Style="background-color: #46375E"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="TextBox1" ID="rfTextBox1" runat="server"
SetFocusOnError="true"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox2" runat="server" ForeColor="White" Height="30px" Style="background-color: #46375E"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="TextBox2" ID="rfTextBox2" runat="server"
SetFocusOnError="true"></asp:RequiredFieldValidator>
<asp:Button ID="BtnSubmit" runat="server" Width="15%" Text="SIGN UP" ForeColor="White"
Style="background-color: #49A7E4; cursor: pointer;" Height="40px" /></div>
</div>
You have to include jquery UI as dependency along with jquery to get the shake effect.
$("#txt1").click(function() {
$(this).effect( "shake" );
});
<button id="txt1">shake it</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
OR
if you dont want to include Jquery UI, then you will have to implement it as seen in this answer on SO.
$("#txt").click(function(){
$(this).shake();
});
<button id="txt">shake it</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
intShakes = intShakes || 10;
intDistance = intDistance || 2;
intDuration = intDuration || 1000;
this.each(function() {
$(this).css("position","relative");
for (var x=1; x<=intShakes; x++) {
$(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
.animate({left:intDistance}, ((intDuration/intShakes)/2))
.animate({left:0}, (((intDuration/intShakes)/4)));
}
});
return this;
};
</script>

Parent Window is not getting disabled in asp.net web page via javascript

I want to open a popup window and disable the parent window. Below is the code that I am using.For some reason, the parent window does not get disabled. Do I need some additional code OR what is the case?I also want to gray out the parent page while it is disabled so help me in this also.
<script type="text/javascript">
var popupWindow = null;
function OpenPopup() {
popupWindow = window.open("ClockPopUP.aspx", "Time", "scrollbars=no,resizable=no,width=550,height=350,left=300,top=300");
return false;
}
function parent_disable() {
if (popupWindow && !popupWindow.closed)
popupWindow.focus();
document.onmousedown = focusPopup;
document.onkeyup = focusPopup;
document.onmousemove = focusPopup;
}
function focusPopup() {
if (popupWindow && !popupWindow.closed) { popupWindow.focus(); }
}
function CheckDateEalier(sender, args)
{
var toDate = new Date();
toDate.setMinutes(0);
toDate.setSeconds(0);
toDate.setHours(0);
toDate.setMilliseconds(0);
if (sender._selectedDate < toDate)
{
alert("You can't select day earlier than today! In Case if you are selecting Previous date then, By default it will take current Date.");
sender._selectedDate = toDate;
//set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
if (sender._selectedDate > toDate)
{
document.getElementById('<%= txtTimeSpent.ClientID%>').disabled = false;
}
}
<asp:Content ID="Content1" ContentPlaceHolderID="cphTop" runat="server" >
<asp:ScriptManager ID="ScriptManger1" runat="server">
<%--<Scripts>
<asp:ScriptReference Path="js/Progress.js"/>
</Scripts>--%>
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="updProduction">
<ContentTemplate>
<div id="counter" >
</div>
<div id="content">
<div id="right">
&nbsp
<asp:Button ID="Button1" runat="server" Text="Lunch" CausesValidation="false" CssClass="bigbuttons" style="background:url(../App_Themes/Images/green-box.gif)" Font-Bold="True" ForeColor="White" Font-Size="Large" /> <br />
<asp:Button ID="Button2" runat="server" Text="Break" CausesValidation="false" CssClass="bigbuttons" style="background:url(../App_Themes/Images/red-box.gif)" Font-Bold="True" ForeColor="White" Font-Size="Large" /> <br />
<asp:Button ID="Button3" runat="server" Text="L&D Training " CausesValidation="false" CssClass="bigbuttons" style="background:url(../App_Themes/Images/green-box.gif)" Font-Bold="True" ForeColor="White" Font-Size="Large" /> <br />
<asp:Button ID="Button4" runat="server" Text="Shift End" CausesValidation="false" CssClass="bigbuttons" style="background:url(../App_Themes/Images/red-box.gif)" Font-Bold="True" ForeColor="White" Font-Size="Large" /> <br />
</div>
</div>
You could create a div with grey semitransparent background that you position absolutely over the content of the parent window (using z-index). On this div you can then bind the onclick-event to focus the on the other window.
Something like this:
var disableDiv = document.createElement("div");
disableDiv.style.zIndex = 1000;
disableDiv.style.position="absolute";
disableDiv.style.width = "1024px"; //adjust this to your spec
disableDiv.style.height = "800px"; //adjust this to your spec
disableDiv.style.background = "rgba(100,100,100, .5)";
if(document.attachEvent){
disableDiv.attachEvent('onclick', function (e) {
//do IE stuff
})
}else{
disableDiv.addEventListener("click", function (e) {
//do stuff
}, false);
}
document.body.appendChild(disableDiv);

Categories