CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Modal boxes, popups, etc


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old September 20th, 2012, 08:51 PM
randyy randyy is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2012
Posts: 7 randyy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 39 m 36 sec
Reputation Power: 0
Modal boxes, popups, etc
So, I'm working on setting up a popup box on my wordpress site. The intent is to have a class call the box type (blue button), then call an Easy Modal plugin (eModal eModal-1). The eModal plugin will require the user to enter in some information into a CF7 contact form. I can get this work.

However, after the user enters in this contact information I'd like to be able to have my e-Junkie cart (ec_ejc_thkbx) popup to give them a 'free report'.

The way I have it setup now, both the contact form and the e-Junkie cart buttons popup, but the contact form is going "underneath" the cart. I really need it the other way around.

Here is the code I am currently using:
Code:
<div class="call-to-action">
            <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=1148610&cl=223877&ejc=2" class="blue button ec_ejc_thkbx eModal eModal-1">Get The Free Report!</a>           
            </div><!-- end of .call-to-action -->


This particular code is on
Code:
www.landmanbrokers.com/2ndchance/


I'd appreciate any help anyone can offer.
Reply With Quote
  #2  
Old September 20th, 2012, 09:00 PM
jack13580 jack13580 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2012
Posts: 143 jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 5 Days 1 h 1 m 50 sec
Reputation Power: 75
Quote:
Originally Posted by randyy
So, I'm working on setting up a popup box on my wordpress site. The intent is to have a class call the box type (blue button), then call an Easy Modal plugin (eModal eModal-1). The eModal plugin will require the user to enter in some information into a CF7 contact form. I can get this work.

However, after the user enters in this contact information I'd like to be able to have my e-Junkie cart (ec_ejc_thkbx) popup to give them a 'free report'.

The way I have it setup now, both the contact form and the e-Junkie cart buttons popup, but the contact form is going "underneath" the cart. I really need it the other way around.

Here is the code I am currently using:
Code:
<div class="call-to-action">
            <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=1148610&cl=223877&ejc=2" class="blue button ec_ejc_thkbx eModal eModal-1">Get The Free Report!</a>           
            </div><!-- end of .call-to-action -->


This particular code is on
Code:
www.landmanbrokers.com/2ndchance/


I'd appreciate any help anyone can offer.


easy, just set your contact form to have a higher z-index then your cart and the first result is a good one
Reply With Quote
  #3  
Old September 20th, 2012, 09:24 PM
randyy randyy is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2012
Posts: 7 randyy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 39 m 36 sec
Reputation Power: 0
I understand that z-index will let me move the class I'd like to the foreground. But I'm a little confused where and how I set the z-index.

Could you give me an example where to define it in my code?
Reply With Quote
  #4  
Old September 20th, 2012, 09:45 PM
jack13580 jack13580 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2012
Posts: 143 jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 5 Days 1 h 1 m 50 sec
Reputation Power: 75
Quote:
Originally Posted by randyy
I understand that z-index will let me move the class I'd like to the foreground. But I'm a little confused where and how I set the z-index.

Could you give me an example where to define it in my code?


if you already have a stylesheet change the styling your doing for #eModal-Container then if your using inline styling, which from the source you are just add a z-index property with a big number to it

also click on the link I provided and click on he first result to learn how to use z-index
Reply With Quote
  #5  
Old September 20th, 2012, 10:03 PM
randyy randyy is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2012
Posts: 7 randyy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 39 m 36 sec
Reputation Power: 0
that's like greek to me ;(

I am, quite poor, at this.
Reply With Quote
  #6  
Old September 21st, 2012, 07:23 PM
jack13580 jack13580 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2012
Posts: 143 jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 5 Days 1 h 1 m 50 sec
Reputation Power: 75
in your code look for
Code:
<div id="eModal-Container" style="top: 130px; left: 502px; ">
and where it says style inside the 2 double quotes add
Code:
z-index: 100;
Reply With Quote
  #7  
Old September 21st, 2012, 08:24 PM
randyy randyy is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2012
Posts: 7 randyy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 39 m 36 sec
Reputation Power: 0
Thanks for the help. I see something similar in easy-modal.js, but I'm not quite sure how to structure it, or if I can in this place.

Code:
var options = $.extend({},defaults,options);
		function centerModal(animate){
			var top = ($(window).height() - $('#eModal-Container').outerHeight() ) / 2;
			var left = ($(window).width() - $('#eModal-Container').outerWidth() ) / 2;
			if(animate == true){
				$('#eModal-Container').animate({
					'top': top + $(document).scrollTop(),
					'left': left
				});
			} else {
				$('#eModal-Container').css({
					'top': top + $(document).scrollTop(),
					'left': left
				});
			}
		}
Reply With Quote
  #8  
Old September 21st, 2012, 09:04 PM
jack13580 jack13580 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2012
Posts: 143 jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 5 Days 1 h 1 m 50 sec
Reputation Power: 75
Quote:
Code:
if(animate == true){
				$('#eModal-Container').animate({
					'top': top + $(document).scrollTop(),
					'left': left
				});
			} else {
				$('#eModal-Container').css({
					'top': top + $(document).scrollTop(),
					'left': left
				});
			}


where it says
Code:
'left': left
for both of them after the left thats not in the single quotes put a comma and then hit enter and put
Code:
'z-index': 100
and do this for both of the
Code:
'left': left`s
Reply With Quote
  #9  
Old September 21st, 2012, 09:23 PM
randyy randyy is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2012
Posts: 7 randyy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 39 m 36 sec
Reputation Power: 0
I've got the following, but still no dice.

Code:
var options = $.extend({},defaults,options);
		function centerModal(animate){
			var top = ($(window).height() - $('#eModal-Container').outerHeight() ) / 2;
			var left = ($(window).width() - $('#eModal-Container').outerWidth() ) / 2;
			if(animate == true){
				$('#eModal-Container').animate({
					'top': top + $(document).scrollTop(),
					'left': left,
					'z-index': 1000
				});
			} else {
				$('#eModal-Container').css({
					'top': top + $(document).scrollTop(),
					'left': left,
					'z-index': 1000
				});
			}
		}


When I set the zindex to 100 the plugin would lock up, so I moved it higher... and it loads, but still underneath I've tried making the value higher, but nothing changes. I assume I have the format above correct?
Reply With Quote
  #10  
Old September 21st, 2012, 09:42 PM
jack13580 jack13580 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2012
Posts: 143 jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 5 Days 1 h 1 m 50 sec
Reputation Power: 75
Code:
<div id="EJEJC_window" style="position: absolute; background-color: rgb(255, 255, 255); z-index: 11102; border: 1px solid rgb(68, 68, 68); text-align: left; width: 700px; left: 341.5px; top: 297px; background-position: initial initial; background-repeat: initial initial; ">
look for that and lower the z-index on it
Reply With Quote
  #11  
Old September 21st, 2012, 09:49 PM
randyy randyy is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2012
Posts: 7 randyy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 39 m 36 sec
Reputation Power: 0
Wonderful! Thanks! I tried upping the zindex to 10000, but I guess I just didn't go high enough.
Reply With Quote
  #12  
Old September 21st, 2012, 09:52 PM
jack13580 jack13580 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2012
Posts: 143 jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level)jack13580 User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 5 Days 1 h 1 m 50 sec
Reputation Power: 75
just to warn you, your contact popup isn't following the screen but the shopper one is

I think you should fix that
Reply With Quote
  #13  
Old September 21st, 2012, 09:56 PM
randyy randyy is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2012
Posts: 7 randyy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 39 m 36 sec
Reputation Power: 0
Now that you mention it I see that.

Of course I don't have a clue how to fix it, lol
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Modal boxes, popups, etc

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap