jquery - jQuery淡入/淡出不起作用

Question

我试图在单击链接以显示某些内容时弹出一个 div。

jQuery：

    $(document).ready(function() {

    //Popup Content Script
    $("#services").click(function(){

        servicesPopup();

    });

    $(".popupClose").click(function() {

        closePopupFunction();

    });

    function servicesPopup() {

        $(".popup").fadeIn("slow", function() {

            $(".container").css("opacity", ".3");
            $(".popup").html("This is a test.\n\
            This is a test.\n\
            This is a test.\n\
            This is a test.\n\
            This is a test.");

        });   
    };

    function closePopupFunction () {

        $(".popup").fadeOut("slow");
        $(".popup").html("");
        $(".container").css("opacity","1");


    };

    });

HTML：

    <li><a href="#" class="button" id="services" title="Learn about all of our services."><span>Services</span></a></li>

单击按钮时没有任何反应。我已经尝试了所有我能想到的方法来更改代码和 HTML，但都没有成功。我在这里进行了搜索，除了完整查找所有 jQuery 代码之外什么也没找到，也找不到答案。感谢您的任何帮助。

Answer 1

尝试这个，

function servicesPopup() {
    $(".popup").fadeIn("slow", function() {
        $(".container").css("opacity", ".3");
        //Also write the string in a single line or escape it
        $(".popup").html("This is a test.<br/>This is a test.<br/>This is a test.");
    });   
}

function closePopupFunction () {
    $(".popup").fadeOut("slow");
    $(".popup").html("");
    $(".container").css("opacity","1");
}


$(document).ready(function() {
    //Popup Content Script
    $("#services").click(function(e){
        e.preventDefault();
        servicesPopup();
    });

    $(document).on('click',".popupClose",function() {
        closePopupFunction();
    });    
});