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>

我希望这些答案可以帮助将来的任何人

使用灯箱搜索弹出框

1 个答案: