在JS文件中传输弹出的HTML内容
我有一个工作弹出的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代码。
谢谢你的帮助。
更新：我在这里为它创建了一个小提琴：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)回答 2
Stack Overflow用户
发布于 2012-12-18 07:55:59
使用
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
Stack Overflow用户
发布于 2012-12-18 07:51:56
您可以将内容直接写入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 1.7开始，jQuery中就不再推荐使用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字符串插入到另一个元素中，但是通过在这里创建一个元素，您可以更灵活地处理它的位置。
https://stackoverflow.com/questions/13928470
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号