Popup show and hide from both server side and client side

Question

0.00/5 (No votes)

See more:

I have a popup div to which i am showing that from server side. I want to hiding that popup from client side. Any suggestion please feel free to share.
My code is given below:-

design page
------------------------

ASP.NET

<div id="Popupdiv"  runat="server" class="popupwindow" visible="false"> 
<img alt="" src="../images/close.png"  önclick="f1();" />

javascript
--------------------------

JavaScript

function f1() 
{ 
div1 = document.getElementById('<%=Popupdiv.ClientID%>') 
div1.style.visibility="hidden"; 
}

code behind
------------------------------------------

C#

Popupdiv.Visible = true;

It works fine but measure problem is for every post back that popup div displying automatically.

Posted 20-Jul-12 5:28am

Kamalkant(kk)

Updated 20-Jul-12 8:54am

Sandeep Mewara

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Answer 1 · 2012-07-20T09:07:00

It works fine but measure problem is for every post back that popup div displying automatically.
I believe this is your issue that you are talking of.

Now, two things.
1. You should use display style attribute instead of visibility attribute. Display will hide/show keeping the control on the page. Setting, visible property does not render the control at all which makes it impossible to access on client side.

2. Your div display is reset on postback as the state is not maintained automatically here. You changed the display of it client side which server is not aware of. To persist the set property on postback, you need to track the change made and set it again on server side. One of the ways to do it:
a. Keep a hidden field on your page. (make it server control if using input of hidden type) (Default it to true - which means show div)
b. Use this hidden field as a flag - true/false: true for display, false for hide
c. When you are hiding the div from client side (code f1() above), set the hidden field too. Set 'false' when hiding the div.
d. During postback, in your page_load, check the value of hidden field. Based on the value of hidden field, set the display attribute of div.
Something like:

C#

if(hdnField.Value == "false")
  Popupdiv.Attributes.Add("style", "display:none");

Try!

[SNS] Code updated.

Shemeer NS · Answer 2 · 2012-07-20T05:49:00

Solution 1

If u want to hide from clientSide then you should set attribute style display:none from code behind instead of Visible Property

Once you set the display attribute from codebehind then just change it to block from client side

Posted 20-Jul-12 5:49am

Shemeer NS

Comments

Sandeep Mewara 20-Jul-12 14:54pm

Comment from OP:
How to set attribute for display:none ? Kindly mention one example.

I have gone though your suggestion but same thing is going on. The popup div hides but then for every post back that popup coming automatically.