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

我最初发现了一个很好的jQuery弹出函数，用于我正在创建的网站。原来的帖子来自这里：

基本上，我想要实现的是让每个弹出框包含不同的内容（比如我的.pop1和.pop2 divs: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"));

$.fn.slideFadeToggle=函数（放松、回调）{
返回此值。每个（函数（）{
动画（{opacity:'toggle'，height:'toggle'}，“fast”，easing，callback）；
});
};
$.fn.myPopup=函数（popupText）{
返回此值。每个（函数（）{
var popupHtml=$（“”，{'class'：'messagepop'，text:popupText}），
p=$（'
'，{style:'align=“right”}），
收盘价=$（'


乱数假文


你好，世界

以下是JSFIDLE上的代码：

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

---

编辑：确实有人帮助弹出框。现在我需要帮助使弹出框不同时出现。它们需要与相关链接（类）分开弹出。

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

查找jQuery元素的正确方法是

$（“.className”）

注意类选择器周围的引号

$.fn.slideFadeToggle=函数（放松、回调）{
返回此值。每个（函数（）{
动画（{opacity:'toggle'，height:'toggle'}，“fast”，easing，callback）；
});
};
$.fn.myPopup=函数（popupText）{
返回此值。每个（函数（）{
var popupHtml=$（“”，{'class'：'messagepop'，text:popupText}），
p=$（'
'，{style:'align=“right”}），
收盘价=$（'


乱数假文


你好，世界

谢谢。我确实错过了那些引号。这些框现在可以工作了。现在问题是不能同时打开两个框。我需要在单击href时分别打开它们。我不明白。请指定。我有两个框：$（“.pop”）.myPopup（$（.pop”）；$（“.pop”））.myPopup（$（.pop2”）。myPopup（$（.pop2”））；单击任何a href链接时，这两个链接都会同时出现。我需要在单击相关a href链接时显示一个框（例如：当我单击a href id=“#wordABCD”）时，会弹出class=“.pop2”框）。这是否更好？我对其进行了更改，以便在弹出函数中，当您滑动FadeToggle时，它切换传递到函数中的元素。

    <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>