Login Pop Up.

Hello, I was wondering if anyone here could help me.

I would like to add a Login Pop Up module when you click on the log-in button in the navigation bar.
I think it would look a lot better than having to go to a new page.

Here is my website: http://www.motion-master-templates.com

Thank you :)

Hi Deyson,

You may want to look into using the Pro Login Widget, which can also be called dynamically using PHP: Dashboard -› s2Member® -› API / Scripting -› Pro Login Widget (via PHP)

If you want a JavaScript popup to appear when the Login menu item is clicked, you’d need to create that part yourself and then include the s2Member Pro Login Widget.

Can you point me in the right direction on how to add that action to the login menu myself.

I am already using the widget at the bottom of my site. But would like the pop up from the navigation bar.

Thank you :)

• This reply was modified 4 years, 9 months ago by  Deyson Ortiz.

Hi Deyson,

You’ll need to use JavaScript to create the popup when the menu item is clicked and then call the Pro login widget dynamically as described here: Dashboard -› s2Member® -› API / Scripting -› Pro Login Widget (via PHP).

As per our support policy, we are unable to assist with custom coding (please see s2Member® » Support Policy » Outside Scope).

Ok, can you point me in the best direction to find how to do this?

Thank you :)

Hi,

NOTE: The Pro Login Widget is only available to s2member Pro

Hope this help:

1- Add this to the your template header (header.php):

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});
				
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});
</script>

<style>
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
</style>

2- Add this to where you want to show the menu button

<div id="button"><input type="submit" value="Log In" /></div>

<div id="popupContact">
		<a id="popupContactClose">x</a>
		<p id="contactArea">
			<?php echo s2member_pro_login_widget(); ?> 
		</p>
	</div>
	<div id="backgroundPopup"></div>
	

You can optimize it the way you want. add the style to your style sheet and add the second JavaScript to a separate file and call it like this [example]

<script src="login_popup.js" type="text/javascript"></script>

Now, since you want to add it to your menu I would remove the

<div> and use <ul> and <li>

instead:

<li id="button"><input type="submit" value="Log in" /></li>

and add your menu custom style like this:

<li id="button" class="your menu style"><input type="submit" value="Log In" /></li>

Hop this help

Sam

• This reply was modified 4 years, 9 months ago by  DrByte.

Hello Dr Byte ad thank you. :)

First off before I get started I had a few questions:

– Where in the Header should I put the first code? I am using a child theme so I would place it on the child theme’s header.php. I just need to know if it needs to be in the start of the header or end or does it matter?

– Would I put the second code also in the header.php ?

Thank you very much for you time, please pardon my ignorance, I am still learning.

Have a wonderful day!

Hi, the first part which goes into the theme header.php is broken into 3 codes.

To make it easier for you to edit and add later on: Create a new folder under WordPress installation directory:
call it login-popup

http://yoursite.com/login-popup/

create 2 more folders under that: call the first js and the second css

http://yoursite.com/login-popup/js/
http://yoursite.com/login-popup/css/

Make sure all these folders have 755 or 777 permission

now, open your theme header.php and add this after the

<head> and before </head> tags

add the below

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

and

<script src="http://yoursite.com/login-popup/js/login_popup.js" type="text/javascript"></script>

<link rel="stylesheet" href="http://yoursite.com/login-popup/css/login-popup.css" type="text/css" media="screen" />

Download both files here: http://soft-data.s3.amazonaws.com/login-popup.zip

So it will look like this:

<link rel="stylesheet" href="http://yoursite.com/login-popup/css/login-popup.css" type="text/css" media="screen" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://yoursite.com/login-popup/js/login_popup.js" type="text/javascript"></script>

The second code goes anywhere you want in the theme. Since you want to use it in the menu bar, it might be in the herder.php too. or you can use it as is in your sidebar.

• This reply was modified 4 years, 9 months ago by  DrByte.
• This reply was modified 4 years, 9 months ago by  DrByte.

Hello DrByte, Thank you for taking the time to help me.

I have a question, where exactly should I place the second code inside of the header?

I have 2 navigation bars, one that logged out user see which has the “log in” button right after “contact” : http://motion-master-templates.com/

And I have an second navigation in which there is no log-in button, since they are already logged in.

So the end result I would want log-out users to be able to click on the “log-in” button in the navigation bar: http://motion-master-templates.com/ and the log-in window pops up.

Thank you :) Have an awesome day!