Javascript 在JS文件中传输弹出式HTML内容_Javascript_Jquery_Html

Javascript 在JS文件中传输弹出式HTML内容

javascript jquery html

Javascript 在JS文件中传输弹出式HTML内容,javascript,jquery,html,Javascript,Jquery,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

我有以下工作弹出式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>

因此，在点击事件之后，JS将简单地将其弹出，但它是在JS文件中生成的，而不是隐藏在现有内容上的HTML

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

谢谢你的帮助

更新：我在这里为这把小提琴制作了一把小提琴：

（功能（a）{
a、 fn.popup=功能（b）{
变量c，d=[self.pageXOffset | document.documentElement.scrollLeft | document.body.scrollLeft，self.pageYOffset | document.documentElement.scrollTop | document.body.scrollTop]；
a（“body”）.append（c=a（“”）），_init=function（）{
_add#overlay（），#add#buttons（），a（“#弹出框#弹出内容”）.css（“最大高度”，a（窗口）.height（）-400），a（窗口）.on（“调整大小”，函数（）{
a（“#弹出框#弹出内容”）.css（“最大高度”，a（窗口）.height（）-400）
})
}，_add_overlay=函数（）{
c、 css({
不透明度：.85，
位置：“绝对”，
排名：0，
左:0,，
宽度：“100%”，
“z指数”：99999，
显示：“无”，
高度：a（文档）。高度（）
})
}，_show_overlay=函数（）{
c、 是（“：可见”）| c.fadeIn（“快速”）
}，_hide_overlay=函数（）{
c、 是（“：可见”）和&c.隐藏（）
}，_添加_按钮=功能（）{
a（“a[rel=弹出关闭]”）。单击（函数（）{
返回_hide_box（），！1
})，a（“a[rel=弹出打开]”）。单击（函数（）{
返回_show_box（），！1
})
}，_show_box=函数（）{
如果（！一个（“#弹出框”）是（“：可见”））{
_show_overlay（），一个（“#弹出框”）.fadeIn（“快速”）；
var b=a（“html”）；
b、 数据（“滚动位置”，d），b.data（“上一次溢出”，b.css（“溢出”），b.css（“溢出”，“隐藏”），window.scrollTo（d[0]，d[1]）
}
}，_hide_box=函数（）{
如果（一个（“#弹出框”）是（“：可见”））{
变量b=a（“html”），
c=b.数据（“滚动位置”）；
b、 css（“溢出”，b.data（“上一次溢出”）、window.scrollTo（c[0]，c[1]）、_hide_overlay（）、a（“#弹出框”）.hide（）
}
}，_init（）
}
})（jQuery）

您可以将内容直接作为字符串写入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中从jquery1.7开始就被弃用了。它已被上的

替换。见和

如果您想在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字符串插入到另一个元素中，但是通过在这里创建一个元素，您在放置上有了更多的灵活性。
使用
var popupHtml=$（“这是弹出式内容。敏捷的棕色狐狸跳过了懒狗。”）
popupHtml.popup（）
我在你使用的弹出式插件中发现了很多问题。修复了它们，使其正常工作。看一看这一个几乎可以正常工作，但它只提供弹出窗口的背景，而不提供内容本身。请共享从中获取弹出窗口库的网站的URL。嗨，Raghav，我在这里创建了小提琴：您的弹出窗口库假设在dom中存在一个带有#弹出框的html。它需要修改。我可以修改弹出库代码吗？如果是的话，我想非缩小版。如果你可以指向来源，我可以从那里选择它。是的，当然，你可以在小提琴中做任何你想做的事情，只要点击链接后弹出窗口能正确显示。谢谢。是否可以在JS代码中包含。这是因为在您的示例中，您假设弹出框div在JS之外。我需要所有弹出的HTML代码都在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;

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

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