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は単にそれをポップアウトしますが、既存のコンテンツに隠されたHTMLではなく、JSファイル内で発生します。

その理由は、私が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 タグなどを書き込むと、ページ上で期待どおりにレンダリングされます。平文に限定されません。

注: livejQuery 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 に答える