多个弹出窗口，每个窗口都有不同的内容

Question

我最初发现了一个很好的 jQuery 弹出功能，用于我正在创建的网站。原帖来自这里：Reducing duplicated code with JQuery function

基本上我想要实现的是让每个弹出框包含不同的内容（例如我的 .pop1 和 .pop2 div 中的所有内容：p 和 img），这样我仍然可以通过CSS。我还需要确保在其相关链接上弹出正确的 div。

这是我正在使用的代码：

jQuery

 $.fn.slideFadeToggle = function(easing, callback) {
    return this.each(function() {
        $(this).animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    });
};

$.fn.myPopup = function(popupText) {
    return this.each(function() {
        var popupHtml = $('<div />', {'class': 'messagepop pop', text: popupText}),
            p         = $('<p />', {style: 'align="right"'}),
            close     = $('<a />', {href: '#', 'class': 'close', text: 'Close'});

        $(this).on('click', function(){
            $(this).addClass("selected").parent().append(popupHtml.append(p).append(close));
            $(".pop").slideFadeToggle()
            $("#email").focus();
        });
        close.on('click', function(e) {
            $(".pop").slideFadeToggle();
            $(this).removeClass("selected");
        });
    });
};

$("#word1234").myPopup($(".pop"));
$("#wordABCD").myPopup($(".pop2"));

还有 HTML

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="#" id="word1234">Supercalifragilisticexpialidocious</a></li>
<li><a href="#" id="wordABCD">Foo</a></li>

<div class="messagepop pop">
  <img src="https://upload.wikimedia.org/wikipedia/en/f/f7/Sugimoris025.png" width="100px" />
  <p>
  Lorem Ipsum
  </p>  
</div>

<div class="messagepop pop2">
  <img src="https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg" width="100px" />
  <p>
  Hello World
  </p>  
</div>

这里是 jsfiddle 上的代码：https://jsfiddle.net/6rcr1d2v/

我是 jQuery 的初学者，所以如果有人能帮助我修复并尽可能简单地解释如何做到这一点，我将非常感激。谢谢！

编辑：确实有人帮助弹出框。现在我需要帮助让弹出框不会同时出现。他们需要单独弹出相关链接（类）。

Answer 1

您的问题是您有一些语法错误。您没有在引号中包围 pop 和 pop2 选择器。

找到一个jQuery元素的正确方法是

$(".className")

注意类选择器周围的引用。

$.fn.slideFadeToggle = function(easing, callback) {
    return this.each(function() {
        $(this).animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    });
};

$.fn.myPopup = function(popupText) {
    return this.each(function() {
        var popupHtml = $('<div />', {'class': 'messagepop pop', text: popupText}),
            p         = $('<p />', {style: 'align="right"'}),
            close     = $('<a />', {href: '#', 'class': 'close', text: 'Close'});
        
        $(this).on('click', function(){
            $(this).addClass("selected").parent().append(popupHtml.append(p).append(close));
            $(popupText).slideFadeToggle()
            $("#email").focus();
        });
        close.on('click', function(e) {
            $(popupText).slideFadeToggle();
            $(this).removeClass("selected");
        });
    });
};

$("#word1234").myPopup($(".pop"));
$("#wordABCD").myPopup($(".pop2"));

a.selected {
  z-index:100;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="#" id="word1234">Supercalifragilisticexpialidocious</a></li>
<li><a href="#" id="wordABCD">Foo</a></li>

<div class="messagepop pop">
  <img src="https://upload.wikimedia.org/wikipedia/en/f/f7/Sugimoris025.png" width="100px" />
  <p>
  Lorem Ipsum
  </p>  
</div>

<div class="messagepop pop2">
  <img src="https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg" width="100px" />
  <p>
  Hello World
  </p>  
</div>