javascript - 使用灯箱搜索弹出框

Question

我想使用灯箱或类似的东西制作一个弹出窗口。

在弹出窗口中会有一个搜索框。

我厌倦了使用不同的脚本，我已经开始使用 javascript 来让它工作了。当我点击链接时，它只会打开一个处于弹出框状态的新页面。

我想做这样的事情: http://www.jcsl.nl/medewerkers/producten.png

因此，当我搜索产品并选择它时，它会出现在列表中。

到目前为止我已经有了这个，但也许脚本太旧了，我应该寻找其他东西。我真的很想学习，所以如果您有更好的想法，请指出我正确的方向:

JavaScript:

var modal = (function () {
    // Generate the HTML and add it to the document
    $modal = $('<div id="modal"></div>');
    $content = $('<div id="content"></div>');
    $close = $('<a id="close" href="#"></a>');

    $modal.hide();
    $modal.append($content, $close);

    $(document).ready(function () {
        $('body').append($modal);
    });

    $close.click(function (e) {
        e.preventDefault();
        $modal.hide();
        $content.empty();
    });
    // Open the modal
    return function (content) {
        $content.html(content);
        // Center the modal in the viewport
        $modal.css({
            top: ($(window).height() - $modal.outerHeight()) / 2,
            left: ($(window).width() - $modal.outerWidth()) / 2
        });
        $modal.show();
    };
}());

// Wait until the DOM has loaded before querying the document
$(document).ready(function () {
    $('a#popup').click(function (e) {
        modal("<p>This is popup's content.</p>");
        e.preventDefault();
    });
});

CSS:

#modal {
    position:absolute;
    background:gray;
    padding:8px;
}
#content {
    background:white;
    padding:20px;
}
#close {
    position:absolute;
    background:url(close.png);
    width:24px;
    height:27px;
    top:-7px;
    right:-7px;
}

html:

<a id="popup" href="includes/search.php">Simple popup</a>

http://jsfiddle.net/isherwood/ypJRK/

Answer 1

我犯的错误很简单。

我在按正确的顺序排列各行时犯了一个错误。

这一行必须放在第一位。所以在 .css 和 javascript 文件之前

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

我希望这个答案对将来的任何人都有帮助