#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    7
    Rep 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.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    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
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    7
    Rep 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?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    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
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    7
    Rep Power
    0
    that's like greek to me ;(

    I am, quite poor, at this.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    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;
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    7
    Rep 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
    				});
    			}
    		}
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    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
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    7
    Rep 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?
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    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
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    7
    Rep Power
    0
    Wonderful! Thanks! I tried upping the zindex to 10000, but I guess I just didn't go high enough.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    just to warn you, your contact popup isn't following the screen but the shopper one is

    I think you should fix that
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    7
    Rep Power
    0
    Now that you mention it I see that.

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

IMN logo majestic logo threadwatch logo seochat tools logo