3

我有这个工作的弹出 HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>PopUp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

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

<script type="text/javascript">
jQuery(function () {
    jQuery().popup();
});
</script>
</head>
<body>

<a href="#" id="triggerforpopup" rel="popup-open">Show popup</a>

<div id="popup-box">
This is the pop up content. The quick brown fox jumps over the lazy dog.
</div>
</body>
</html>

实际弹出内容在：

<div id="popup-box">
</div>

是否可以将弹出的 HTML 内容 (..) 传输到我的 JS 文件？实际上在jQuery函数的点击事件里面？例子：

jQuery( document ).ready( function($) {
    $('#triggerforpopup').live('click',(function() {
        //launch the pop code to HTML
    }));
});

因此，在单击事件之后，JS 会简单地将其弹出，但它源自 JS 文件内部，而不是隐藏在现有内容上的 HTML。

原因是我正在编写一个 Wordpress 插件，将所有这些信息放在一个 JS 文件中会很方便。我不想在默认隐藏的现有模板内容中添加额外的 HTML 代码。

感谢您的帮助。

更新：我在这里创建了一个小提琴：http: //jsfiddle.net/codex_meridian/56ZpD/3/

(function (a) {
a.fn.popup = function (b) {
    var c, d = [self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop];
    a("body").append(c = a('<div id="popup-overlay"></div>')), _init = function () {
        _add_overlay(), _add_buttons(), a("#popup-box #popup-content").css("max-height", a(window).height() - 400), a(window).on("resize", function () {
            a("#popup-box #popup-content").css("max-height", a(window).height() - 400)
        })
    }, _add_overlay = function () {
        c.css({
            opacity: .85,
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            "z-index": 99999,
            display: "none",
            height: a(document).height()
        })
    }, _show_overlay = function () {
        c.is(":visible") || c.fadeIn("fast")
    }, _hide_overlay = function () {
        c.is(":visible") && c.hide()
    }, _add_buttons = function () {
        a("a[rel=popup-close]").click(function () {
            return _hide_box(), !1
        }), a("a[rel=popup-open]").click(function () {
            return _show_box(), !1
        })
    }, _show_box = function () {
        if (!a("#popup-box").is(":visible")) {
            _show_overlay(), a("#popup-box").fadeIn("fast");
            var b = a("html");
            b.data("scroll-position", d), b.data("previous-overflow", b.css("overflow")), b.css("overflow", "hidden"), window.scrollTo(d[0], d[1])
        }
    }, _hide_box = function () {
        if (a("#popup-box").is(":visible")) {
            var b = a("html"),
                c = b.data("scroll-position");
            b.css("overflow", b.data("previous-overflow")), window.scrollTo(c[0], c[1]), _hide_overlay(), a("#popup-box").hide()
        }
    }, _init()
}
})(jQuery)
4

2 回答 2

4

您可以直接在 JS 中将内容作为字符串写入，然后使用元素的 innerHTML 属性来设置它们的值。您可以在纯 JS 中执行此操作，如下所示。

var popup = document.getElementById("popup-box");
var html = "This is the pop up content. The quick brown fox jumps over the lazy dog.";
popup.innerHTML = html;

您可以在 jQuery 中执行以下操作：

$('#triggerforpopup').on('click', function() {
    $("#popup-box").html(html); // Where html is a variable containing your text.
});

注意：您可以在html字符串中写入 HTML 标记等，它们将按照您在页面上的预期呈现。您不仅限于纯文本。

注意：live自 jQuery 1.7 起已在 jQuery 中弃用。它已被替换为on。请参阅http://api.jquery.com/live/和http://api.jquery.com/on/。

如果您想在评论中提到的 JavaScript 中包含所有内容，您可以这样做：

var popup = document.createElement("div");
popup.id = "popup-box";
popup.innerHTML = "your html here";
document.getElementById("parent element id").appendChild(popup);

这样做是创建一个新的 div 元素，设置其 id，然后将其附加为您选择的父元素的子元素。您可以将 HTML 字符串简单地插入到另一个元素中，但是通过在此处创建一个元素，您可以更灵活地放置它。

于 2012-12-18T07:51:56.157 回答
0

采用

var popupHtml = $('<div>This is the pop up content. The quick brown fox jumps over the lazy dog.</div>');

popupHtml.popup();

我在您使用的弹出插件中发现了很多问题。修复它们以使其正常工作。看看http://jsbin.com/oyamiy/6/watch

于 2012-12-18T07:55:59.383 回答