popup signup help required

erashish14 · November 9, 2013

Hi All,

I'm running a website i.e. http://homepageforu.webs.com/, its running good, its a simple website with HTML & CSS,

I like to add one signup page/image, which fades all the background icons, until n unless, either visitor subscribe to my website, or click cancel on that signup page (this page is also unblockable i.e. doesn't blocked by pop-up blocker) & in either condition, he/she can visit my website, but if he goes for sign up, than that page should be open in a new window.

i've seen this in many websites specially with online shopping or coupons website, like "http://www.shopclues.com/mobiles/mobile-phones.html", the same signup page, when this website opens.

Thanks in Advance

Ashish

davej · November 9, 2013

I wonder what the best approach is for doing that? Have a semi-opaque div to darken the screen and then a login div on top? Would you position them absolute or fixed? Have them both set to display:none until enabled by an event. I'm sure there are various plugins available if you simply want a prepackaged solution. You also have to verify that the result is smartphone-friendly.

You can't make it unblockable and secure without server-side code. The user can turn Javascript off. That would mean that providing all the content and then applying an opaque overlay would not be secure. You would have to load only partial content before login, perhaps load the first page, then after login load the rest of the content or allow the user to navigate to other pages.

Edited November 10, 2013 by davej

erashish14 · November 11, 2013

Hi,

Thanks for Answer, but as i'm new to website designing, can you just let me code for the same or else,

can you just tell me whats this process is called, so that i can just search over net, for its code.

Thanks in Advance

Ashish

Sora · November 11, 2013

Hi,

Thanks for Answer, but as i'm new to website designing, can you just let me code for the same or else,

can you just tell me whats this process is called, so that i can just search over net, for its code.

Thanks in Advance

Ashish

Hi Ashish, search "javascript div popup" on google

Edited November 11, 2013 by Sora

davej · November 11, 2013

I wrote a simple example...

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Modal Login</title><style>#logindiv{display:none;position:absolute;top:50px;left:0;right:0;margin: 0 auto;width: 200px;height:140px;background-color: #eee;border: 1px solid #000;border-radius: 15px;text-align: center;z-index: 2;opacity: 1;filter: alpha(opacity=100);}#overlaydiv{display:none;position: absolute;background-color: #333;left: 0px;top: 0px;width: 100%;height: 100%;text-align: center;z-index: 1;opacity: 0.6;filter: alpha(opacity=60);}#msgoutdiv{display:none;position:absolute;top:50px;left:0;right:0;margin: 0 auto;width: 200px;height:140px;background-color: #eee;border: 1px solid #000;border-radius: 15px;text-align: center;z-index: 12;opacity: 1;filter: alpha(opacity=100);}#user{color:red;font-style:bold;}</style><script>window.onload = function(){document.getElementById("loginbtn").onclick = login;}function login(){var ov = document.getElementById("overlaydiv");var log = document.getElementById("logindiv");var btn = document.getElementById("loginbtn2");var pwd = document.getElementById("pwd");pwd.value = '';ov.style.display = 'block';log.style.display = 'block';btn.onclick = checklogin;}function checklogin(){var ov = document.getElementById("overlaydiv");var log = document.getElementById("logindiv");var btn = document.getElementById("okbtn");var msg = document.getElementById("msgoutdiv");var usr = document.getElementById("usr").value;var pwd = document.getElementById("pwd").value;var userid = document.getElementById("user");var btn0 = document.getElementById("loginbtn");if(usr=="Dummyhead" && pwd=="secret"){//login success (of course to be secure this would //need to be accomplished in server-side code using AJAX)log.style.display = 'none';ov.style.display = 'none';msg.style.display = 'none';btn.onclick = null;userid.innerHTML = usr;btn0.value = 'Logout';btn0.onclick = logout;}else{//login failurelog.style.display = 'none';ov.style.display = 'block';msg.style.display = 'block';btn.onclick = dismissok;user.innerHTML = 'None';}}function dismissok(){var ov = document.getElementById("overlaydiv");var log = document.getElementById("logindiv");var btn = document.getElementById("okbtn");var msg = document.getElementById("msgoutdiv");log.style.display = 'none';ov.style.display = 'none';msg.style.display = 'none';btn.onclick = null;}function logout(){var userid = document.getElementById("user");var btn0 = document.getElementById("loginbtn");userid.innerHTML = 'None';btn0.value = 'Login';btn0.onclick = login;}</script></head><body><input type="button" id="loginbtn" value="Login"/>Current users: <span id="user">None</span><hr/><hr/><p>Melius ocurreret accommodare pro et, sea ne molestie liberavisse. Te mel omittam argumentum intellegam, copiosae adipiscing in vim, duo causae omnesque praesent ea. Ex pro dicta labitur scribentur, autem fabulas prodesset per at. Mea indoctum consectetuer interpretaris at, nostro viderer est ei. Ea pri unum mentitum invidunt, dicam invenire ###### ea, vix libris possim voluptua no.</p><p>Legere deseruisse scripserit sit cu. ###### ei iusto argumentum, mollis commune sed ei, feugiat antiopam scriptorem et his. ###### ex elit denique liberavisse, duo erat disputando cu. Pri meis aperiri id, legere fastidii delicata in eos. Vel everti iudicabit no, sed no vidisse singulis dissentiunt.</p><p>Libris possim voluptua no. Legere deseruisse scripserit sit cu. ###### ei iusto argumentum, mollis commune sed ei, feugiat antiopam scriptorem et his. ###### ex elit denique liberavisse, duo erat disputando cu. Pri meis aperiri id, legere fastidii delicata in eos. Vel everti iudicabit no, sed no vidisse singulis dissentiunt.</p><div id="overlaydiv"></div><div id="logindiv"><br/>Username:<input type="text" id="usr"/><br/>Password:<input type="password" id="pwd"/><br/><input type="button" id="loginbtn2" value="Login"/></div><div id="msgoutdiv"><br/><p>Go away</p><br/><input type="button" id="okbtn" value="Ok"/></div></body></html>

Edited November 11, 2013 by davej

erashish14 · November 13, 2013

Hi Davej,

Thanks for the code , i tried & its really working very well :good: , just one doubts, how can i make it auto appear, whenever website opens,

i mean, Subscription box signup box should appear instantly, without clicking anywhere, than i think, i can get more of my subscriber.

so if you just let me the code the same, i'll be highly thankful to you.

& one thing more, when i searched the net, i came across "Light Box", it is same or its different.

Thanks in Advance.

Ashish

Edited November 13, 2013 by erashish14

davej · November 13, 2013

Well, as I mentioned above, using the Javascript code alone isn't secure. A user can simply turn Javascript off.

window.onload = function(){document.getElementById("loginbtn").onclick = login;logintime(10);}function logintime(delay){setTimeout(login,delay*1000);}

erashish14 · November 14, 2013

Hi,

Thanks for reply, just one more little help (as i'm new to web designing) but can you also provide me the code, as in shown attachment, i need a lightbox for my website, with subscription option & opens automatically whenever websites opens

as shown in link :- http://www.shopclues...ile-phones.html

i'll be highly thankful to you

Thanks in Advance

davej · November 14, 2013

You're going to have to write your own code, but here is another version to look at.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Modal Signup</title><style>#popupdiv{display:none;position:absolute;top:50px;left:0;right:0;margin: 0 auto;width: 350px;height:200px;background-color: #eef;border: 1px solid #000;border-radius: 15px;text-align: center;z-index: 2;opacity: 1;filter: alpha(opacity=100);}#overlaydiv{display:none;position: absolute;background-color: #333;left: 0px;top: 0px;width: 100%;height: 100%;text-align: center;z-index: 1;opacity: 0.6;filter: alpha(opacity=60);}</style><script>window.onload = function(){setTimeout(popup,3000);}function popup(){var ov = document.getElementById("overlaydiv");var pop = document.getElementById("popupdiv");var btn1 = document.getElementById("ok");var btn2 = document.getElementById("no");pop.style.display = 'block';ov.style.display = 'block';btn1.onclick = process;btn2.onclick = dismiss;}function process(){var ov = document.getElementById("overlaydiv");var pop = document.getElementById("popupdiv");var em = document.getElementById("email");pop.style.display = 'none';ov.style.display = 'none';if (em.value.trim!=''){//process email}}function dismiss(){var ov = document.getElementById("overlaydiv");var pop = document.getElementById("popupdiv");pop.style.display = 'none';ov.style.display = 'none';}</script></head><body><p>Melius ocurreret accommodare pro et, sea ne molestie liberavisse. Te mel omittam argumentum intellegam, copiosae adipiscing in vim, duo causae omnesque praesent ea. Ex pro dicta labitur scribentur, autem fabulas prodesset per at. Mea indoctum consectetuer interpretaris at, nostro viderer est ei. Ea pri unum mentitum invidunt, dicam invenire vix libris possim voluptua no.</p><p>Legere deseruisse scripserit sit cuei iusto argumentum, mollis commune sed ei, feugiat antiopam scriptorem et his ex elit denique liberavisse, duo erat disputando cu. Pri meis aperiri id, legere fastidii delicata in eos. Vel everti iudicabit no, sed no vidisse singulis dissentiunt.</p><p>Libris possim voluptua no. Legere deseruisse scripserit sit cuiusto argumentum, mollis commune sed ei, feugiat antiopam scriptorem et his ex elit denique liberavisse, duo erat disputando cu. Pri meis aperiri id, legere fastidii delicata in eos. Vel everti iudicabit no, sed no vidisse singulis dissentiunt.</p><div id="overlaydiv"></div><div id="popupdiv"><br/>Please enter your e-mail:<br/><br/><input type="text" id="email" size="40"/><br/><br/><input type="button" id="ok" value="Ok"/><br/><br/><input type="button" id="no" value="No Thanks!"/><br/></div></body></html>

Edited November 14, 2013 by davej

davej · November 15, 2013

Actually I am very tired of seeing popups like that on webpages. It makes me want to leave and go elsewhere.

erashish14 · November 21, 2013

Hi Davej,

Thanks, Thanks, Thanks a Lot, for all the help, & the code provided by you,

Actually i implemented the same code, in one of my blog i.e. http://telecomtigers.blogspot.in/ (Kindly check once).

Some Doubts :-

1. When you open the blog, It only covers the present current screen, i.e. if i scroll down, than it doesn't move,

I think either it should cover the whole page, when it opens or scroll down when we scroll down the page/screen.

2. Is it possible to set number of times it opens, i.e. if somebody opened my blog than it should appear but if that same person is checking the other section of blog, then it shouldn't appear again n again, which is happening currently.

3. With respect to google adsence, is it correct to display google ads like this i.e. in popup window.

Kindly help in above points too.

Thanks in Advance

Ashish

davej · November 21, 2013

Hmmm... for such a long page you might want to try position: fixed rather than absolute.

erashish14 · November 21, 2013

Hi Davej,

Thanks, your "position" solution, worked, but i also like to know,

Is it possible to set number of times it opens, i.e. if somebody opened my blog than it should appear but if that same person is checking the other section of blog, then it shouldn't appear again n again, which is happening currently.

Thanks in Advance

Ashish

davej · November 21, 2013

Yes, the correct way to do this would probably be to use a cookie.

http://www.w3schools.com/js/js_cookies.asp

erashish14 · November 21, 2013

Hi Davej,

I found one of the code, regarding cookies, but have some doubts, kindly help

Code :-

function createCookie(name,value,days) {

if (days) {

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = "; expires="+date.toGMTString();

}

else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

function readCookie(name) {

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for(var i=0;i < ca.length;i++) {

var c = ca;

while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

}

return null;

}

function eraseCookie(name) {

createCookie(name,"",-1);

}

Code Ends.

How can i implement this code, so that the same pop-up appears only once in 3 days, whenever somebody open my blog &

also if someone look into different post of my blog, but he/she sees that popup only once in single visit.

Thanks in Advance

Ashish

Edited November 21, 2013 by erashish14

erashish14 · November 21, 2013

Hi Davej,

One more code is there, kindly check, as after this code the popup stops appearing,

Code Begins -

function mySetCookie(c_name,value,expiredays)

{var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ “=” +escape(value)+

((expiredays==null) ? “” : “;expires=”+exdate.toGMTString())

}

function myGetCookie(c_name)

{

if (document.cookie.length>0)

{

c_start=document.cookie.indexOf(c_name + “=”)

if (c_start!=-1)

{

c_start=c_start + c_name.length+1

c_end=document.cookie.indexOf(“;”,c_start)

if (c_end==-1) c_end=document.cookie.length

return unescape(document.cookie.substring(c_start,c_end))

}

return “”

}

function showPopupOnce() {

var hasSeenPopup = myGetCookie(“has_seen_popup”);

if (hasSeenPopup == null || hasSeenPopup == “”){

// the user has never seen the popup, so show him!

window.open(“

}

// either way, set the cookie so the user will never see the window again

mySetCookie(“has_seen_popup”, “true”, 365); // 365 days = 1 year

}

</script>

Code Ends -

Thanks in Advance

Ashish

thescientist · November 21, 2013

FYI, the forum supports code tags, you can use those to denote code snippets.

as to why your code isn't working, what debugging are you doing? How are you following the flow of your code to make sure things are happening and values are what you expect them to be? I would use console.log for this.

Also, are you looking in your browsers console for errors? JS errors will show up there and would be the first place I would look.

justsomeguy · November 21, 2013

The window.open line isn't complete. If you want the cookie to last for 3 days then set it for 3 days instead of 365 days.

davej · November 21, 2013

You don't really need all that code because you don't really care about the value of the cookie.

if (!cookie_exists()){alert('Bother the User!');//display the modal popupset_cookie(14); //cookie expires in 14 days}function cookie_exists(){var cookie_name = 'has_seen_popup';var doc_cookie_str = document.cookie;var idx = doc_cookie_str.indexOf(cookie_name + "=");if (idx == -1){ return false; }else{ return true; }}function set_cookie(expire_days){var cookie_name = 'has_seen_popup';var exp_date = new Date();if (parseInt(expire_days)>0){exp_date.setDate(exp_date.getDate() + expire_days);};document.cookie = cookie_name + "=true; expires="+exp_date.toUTCString();}

Edited November 22, 2013 by davej

erashish14 · November 22, 2013

Hi Davej,

Thanks a Ton, with your help, i'm able to apply the required code in my blog.

Its working fine, Hats of to you,

Thanks, Thanks , Thanks, a Ton :good: :good: :good: :good: :good: :good: :good:

http://telecomtigers.blogspot.in/ (Kindly check once).

Regards

Ashish

popup signup help required

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in