if same class, fadeIn / fadout

Question

I have a setup here in jsFiddle: http://jsfiddle.net/2PmnQ/

I'm trying to make a function that will check if the modal has the same class as the button so the button will bring up the modal with the same class. I'm obviously trying to do this dynamically all within one function rather than doing a if statement for every class.

var p = $(".popUp");
var position = p.position();
var tagLength = $("p a").width();
$( ".modal" ).css({left: (position.left + tagLength + 10) + "px", top: position.top + "px"});

$( ".popUp").hover(

    function() {
      $( ".modal" ).stop().fadeIn();
    }, function() {
      $( ".modal" ).stop().fadeOut();
    }

);

consider using jQuery `data` attributes instead of classes http://api.jquery.com/data/ then you can do something like `$(".modal[data-popup='" + "one" + "']").show()` — Greg, Jul 14 '14 at 21:03
Do you want to control the elements individually? If so, you'll need to target the correct elements using (currently) your classes. A better way would be to use data attributes to differentiate them and select between the popup and the modal elements. See: http://jsfiddle.net/2PmnQ/4/ — scrowler, Jul 14 '14 at 21:05
Thanks guys! scrowler your example is exactly what I was looking for. However, how do I get the positioning to work? I tried putting in the data selectors as in Gregs comment above but couldn't get it working. So this doesn't work, but var p = $(".popUp", this); is something along the lines that I need to target "this" .popUp... so the "one" .model is to the right of line one and "two" is to the right of the second line? — mike, Jul 14 '14 at 21:24

Andy · Accepted Answer · 2014-07-14T21:42:52.947

I would use a custom data attribute instead of a class to save the target class:

<p class="popUp" data-modal="one"><a>popUp one here</a></p>
<p class="popUp" data-modal="two"><a>popUp two here</a></p>

<div class="modal one">PopUp one should be here</div>
<div class="modal two">PopUp two should be here</div>

That way you don't have to filter the target out of the trigger element classes and only need this in your hover function:

$('.popUp').hover(function(){    
    $('.modal.'+$(this).data('modal')).fadeIn();
},function(){
    $('.modal.'+$(this).data('modal')).fadeOut();
});

http://jsfiddle.net/2PmnQ/1/

V2 using jQuery UI position() plugin:

<!-- i switched the popup classes to the `a` here so it works in the fiddle -->
<p><a class="popUp" data-modal="one">popUp one here</a></p>
<p><a class="popUp" data-modal="two">popUp two here</a></p>

<div class="modal one">PopUp one should be here</div>
<div class="modal two">PopUp two should be here</div>

JS:

$('.popUp').hover(function(){    
    $('.modal.'+$(this).data('modal'))
        // reset positions otherwise it doesn't work correctly after the first time. don't know why :(
        // looks like this problem: http://forum.jquery.com/topic/position-keeps-adding-original-left-and-top-to-current-values-in-ie-8
        .css({'left':0,'top':0}) 
        // position modal 10px to the right of the popup link    
        .position({'my':'left+10 center', 
                   'at' : 'right center', 
                   'of' : $(this)
                  }
    ).fadeIn();
},function(){
    $('.modal.'+$(this).data('modal')).fadeOut();
});

http://jsfiddle.net/2PmnQ/10/

(Be sure to include the jQuery UI with at least the position plugin: http://jqueryui.com/download/#!version=1.11.0&components=0001000000000000000000000000000000000. Yeah maybe it's a bit overkill for this but it's really convenient)

Thank you! How would I also add this logic to positioning the modals with the jquery I also had before? I tried something like var p = $(".popUp", this); so that the "this" makes it take the top position from "this" but obviously that doesnt work. Right now they appear in the same spot but need to appear next to the line they represent. — mike, Jul 14 '14 at 21:16
@mike I'm a fan of the jQuery UI .position() function. I updated my answer. I hope that's what you meant. — Andy, Jul 14 '14 at 21:43
ya thats exactly what I needed. Thanks so much! amazing how easy jquery ui makes some things, I gotta look more into that! — mike, Jul 14 '14 at 21:55

if same class, fadeIn / fadout

1 Answers1