I have a link button in an ASP.NET application as below. When i click the link button it calls Javascript function which shows another div file and the overlay. However, in this case, the overlay is appearing OVER the div instead of beneath it. Any guess on what could be wrong? I have copied this from another form which works fine.
<asp:LinkButton Text='<%# Eval("CorrectiveActionName") %>'
OnClientClick='<%# Eval("ProductionID", "return ShowCorrectiveActionDiv({0});") %>'
runat="server" OnClick="lnkbtnCorrectiveAction_Click"
CausesValidation="false" ID="lnkbtnCorrectiveAction">
</asp:LinkButton>
The javascript for ShowCorrectiveActionDiv is
function ShowCorrectiveActionDiv(objectid) {
$("#divCorrectiveActionStatusChild").show();
$(".overlay").show();
var productionIdValue = document.getElementById("ContentPlaceHolder1_hdnProductionDIVID");
productionIdValue.value = objectid;
return true;
}
The CSS for overlay class is
.overlay {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: #083371;
opacity: 0.5;
filter:alpha(opacity=50);
}
The overlay div in master page is
<div class="overlay" runat="server"></div>
Related
I have a web page that contains a button. When the button is clicked it calls some code in my code behind that processes. I want to display a "processing" message and a modal to make it so the user has to wait for the processing to be done before they do anything else. I use a javascript function to show the "processing" message and the modal when the button is clicked. When the processing is done the message goes away but the modal stays.
Here's my code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function ShowProgress2() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal);
var loading2 = $(".loading2");
loading2.show();
var top = Math.max($(window).height() / 2 - loading2[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading2[0].offsetWidth / 2, 0);
loading2.css({ top: top, left: left });
}, 200);
//$('modal2').modal('hide'); //this does not hide the modal when processing is done
//document.getElementById('modal2').style.display = 'none'; //this does not hide the modal when processing is done
}
</script>
.modal2
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading2
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
<asp:Button runat="server" ID="MedicaidDataGenerateBillingFile_Generate" Text="Generate" width="100px" OnClientClick="ShowProgress2();"/>
<div class="loading2" align="center" style="display:none;">
<div style="margin: auto; text-align: center; position: absolute; top: 0px; left: 0px; z-index: 9998; width: 100%; height: 100%; background-color: #fff; filter: alpha(opacity=70); opacity: 0.7;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/activity/roller.gif" /><br />
Generating Billing File...
</div>
</div>
Running this as is when the button is clicked the modal displays and the processing message displays in the middle of the modal. When the processing is finished the processing message goes away but the modal stays visible. I've tried a couple of things that are listed at the end of the javascript function that I have commented out, neither of them work to hide the modal. I need the code to make it so the modal goes away/is hidden at the same time the processing message goes away. If anyone would help me out with what needs to be changed/added to my code to accomplish this I would be grateful, thanks in advance.
You define modal like this:
var modal = $('<div />');
modal.addClass("modal2");
$('body').append(modal);
document.getElementById('modal2').style.display = 'none';
this doesnt work, bc you modal doesn't have any id property, when you created it, only class. Either assign it, or use the class
$('modal2').modal('hide');
It doesn't work, because the class in jQuery should be written with dot $('.modal2');
And if you are not using any plugins for modals, the code should be
$('.modal2').hide();
After doing some additional looking into this I found a solution to getting the modal to hide/go away. I found this bit of code in another page where the similar code is being used and the modal is hidden after the processing is done:
<Triggers>
<asp:PostBackTrigger ControlID ="MedicaidDataGenerateBillingFile_Generate" />
</Triggers>
I included this code in my code and set the ControlID equal to my button ID that is getting clicked and now when the processing is finished the processing message goes away and so does the modal.
I hope this can help someone else.
I'd like to link an iframe to a button so I can open the below iframe (iframe/ model window) from clicking on the "keep me posted" button on my site: http://www.aphealthnetwork.com.
iframe code:
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
code for the button:
<div class="buttons">Keep Me Posted! or learn more</div>
I've been searching and searching and can't find the answer anywhere.
Not sure what the end goal is exactly, but if you want to show that iframe in a modal when you click on the button, you could put the iframe in an element for the modal, hide that by default, then show the modal when you click the button. I also added a link to close the model. You might want to adjust the height/width of the modal to fit your needs, too. Or let me know what the end goal is and I can help out with that.
$('.buttons a').on('click',function(e) {
if ($(window).width() > 820) {
e.preventDefault();
$('#modal').show();
}
});
$('.close').on('click',function(e) {
e.preventDefault();
$('#modal').hide();
})
#modal {
display: none;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
iframe {
position: absolute;
top: 1em; left: 50%;
transform: translate(-50%,0);
}
.close {
position: absolute;
top: 1em; right: 1em;
background: black;
color: white;
padding: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">Keep Me Posted! or learn more</div>
<div id="modal">
<a class="close" href="#">close</a>
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
</div>
Just use <input type='button' class='buttons' id='kmp' value='Keep Me Posted' /> or something similar instead... then you could make an output Element <iframe id='output'></iframe> and do this, using jQuery:
$(function(){
$('#kmp').click(function(){
$('#output').css('display', 'block').attr('src', 'https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2');
}
}
You also need to make sure that src is a full document as well. I see that it's not. I threw in that .css('display', 'block') in case you want to start your CSS with #output{display:none;}.
What do you exactly want?
For responsive modal look here
If you want to display the modal content a similar question is here
If you want to only display the iframe use jquery.
Or look at Display website in modal
CSS:
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
JS:
<script type="text/javascript">
function ShowProgress() {
// alert("aa");
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
</script>
HTML:
<div class="loading" align="center" id="loader">
Loading. Please wait.
<br />
<img id="abc" src="../../Images/loader.gif" alt="" />
</div>
<div>
<asp:UpdatePanel ID="UpdatePaneltab" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Button ID="btnSearch" runat="server" Text="Run" CssClass="btn-in" OnClick="btnSearch_Click" OnClientClick="ShowProgress()" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSearch" />
</Triggers>
</asp:UpdatePanel>
I am using above code to show loading image div on button click.But i am not able to hide it wherever i want to inside button click code.It automatically gets hidden after all the button click code is executed.I have exporttoexcel functionality and i want to hide it before my this functionality starts executing because once the exporting starts there is no control over the page and code.But the loading image continuously displays even when the exporting is done.
currently i am using
ClientScript.RegisterStartupScript(this.GetType(), "hwa", "document.getElementById('loader').style.visibility = 'hidden';", true);
to hide div.
I am not able to find out whats the issue.Is there something i am missing which i need to add in code.
Any suggestions ? any ideas?
Please helpme.I am stuck.
You should put write a javascript function in a javascript file or in your aspx file.
function HideLoader() {
$(".loading").hide();
$(".modal").hide();
}
Then you should call this function in your startup script:
ClientScript.RegisterStartupScript(this.GetType(), "hwa", "HideLoader();", true);
Since the output of RegisterStartupScript is written into the page after the page is loaded, the inline script isn't executed.
Edit:
You should probably hide both the .modal div and the .loading div. I changed the javascript. You should put a breakpoint to HideLoader javascript function and see if it gets called. If it gets called and it doesn't hide the div, then you will have an easier time to solve the problem. Just correct the js function to hide the loading divs. If it doesn't get called, you should focus on RegisterStartupScript and see how you can make it call your function.
This is a weird question. I have one page that is centered via the same method all of my other pages are centered but ONLY on my iPhone, it has decided to left justify.
I narrowed it down to this line of code that is causing the problem:
<websitesnext><img src="graphic_elements/1-2.png" width="41" height="22" /> <img src="graphic_elements/next-icon.png" width="32" height="22" /></websitesnext>
That line is wrapped in a div titled "div id=websites", and is located just below a table. Here is the CSS for that wrapping div, and the CSS for the problem div:
#websites {
position: absolute;
top: 282px;
left: 72px;
width: 878px;
}
websitesnext {
position: absolute;
left: 418px;
width: 878px;
top: 350px;
z-index: 6;
}
Here is the javascript that that line is referencing:
<script type="text/javascript"> //this is for the top gallery buttons
$(document).ready(function() {
var option = 'websites2';
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.hidden').hide();
$('#' + option).show();
$('#websites').hide(); //this hides the default gallery, which in this case is the first "websites" gallery page
}
</script>
I also noticed that again, just on this page, my viewport settings are being ignored! Any idea why this is causing ALL of my page contents to left justify on an iPhone? Thanks in advance!
I have a popup which displays a message to the user which says their information has been submitted.The popup div's id NewCustomerStatusPopUp,I want this popup to be displayed when the information has been successfully inserted in the database , so how do I call the javascript function to show popup when all the information has been submitted.Can any one just let me know how can I do this.
Here is my popup
<div id="NewCustomerStatusPopUp">
<asp:Label ID="lblStatus" Text="" runat="server"/>
</div>
CSS:
#NewCustomerStatusPopUp
{
position: fixed;
width: 300px;
height: 250px;
top: 50%;
left: 50%;
margin-left:-255px;
margin-top:-150px;
border: 10px solid #9cc3f7;
background-color:White;
padding: 10px;
z-index: 102;
font-family:Verdana;
font-size: 10pt;
border-radius:10px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
Any help is much appreciated.
Thanks.
To call a javascript function from server you can use a RegisterStartipScript:
After ur insert query write this code
ClientScript.RegisterStartupScript(GetType(), "id", "callMyJSFunction()", true);
<script type="text/javascript">
function callMyJSFunction()
{
alert("Record inserted sucessfully.");
}
If you've got an click event handler in your code behind performing the insert, no need for JS, wrap the div in a panel:
<asp:Panel ID="pnlStatus" Visible="false" >
<div id="NewCustomerStatusPopUp">
<asp:Label ID="lblStatus" Text="" runat="server"/>
</div>
</asp:Panel>
In your code behind, once you've asserted that the new customer was added successfully,
set pnlStatus to visible.
pnlStatus.Visible = true;