Jump to content
erashish14

popup signup help required

Recommended Posts

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
  • Like 1

Share this post


Link to post
Share on other sites

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 by davej

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Sora

Share this post


Link to post
Share on other sites

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 by davej

Share this post


Link to post
Share on other sites

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 by erashish14

Share this post


Link to post
Share on other sites

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);}

Share this post


Link to post
Share on other sites

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

post-167972-0-88949500-1384427728_thumb.png

Share this post


Link to post
Share on other sites

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 by davej

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by erashish14

Share this post


Link to post
Share on other sites

Hi Davej,

 

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

 

 

Code Begins -

 

<script>
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by davej

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...