Question

我从“www.hotscripts.com”，http://www.advancebydesign.com/itemdetails.php?item=15复制了此代码。它的作用只是在屏幕中间显示一个简单的窗口。

需要3个非常简单的步骤：

1）创建一个按钮<input type="button" onclick='Javascript:my_box.Show();' value="Show Popup Box">

2）将此包含在头<script language="Javascript" type="text/Javascript" src="jscpopupbox.js"></script>

中

3）并且这也增添了头脑：

my_box = new jscPopupBox();
my_box.width = 400;
my_box.height = 450;

content_html = "<div style=\"padding:0;height:30px;margin:0;border:none;";
content_html+= "background-color:#CCF;clear:both;\"><input type=\"button\" ";
content_html+= "style=\"float:right;height:26px;width:26px;\" value=\"X\" ";
content_html+= "onclick='my_box.Hide();'></div>\n";

content_html+= "<iframe src=\"../license.txt\" width=\"100%\" style=\"";
content_html+= "border:none;padding:0;margin:0;\" height=\"420px\"></iframe>";

my_box.html = content_html;

我没有得到的是为什么我网站上的窗口出现在左上角，而不是中间。我没有触及源代码，当我在一个简单的HTML页面上尝试它时，它似乎工作。我的CSS干扰了吗？

我从我的网站上删除了所有的CSS，最终我发现问题不是它，而是在页面顶部显示<!DOCTYPE HTML>。这与javascript部分有什么关系？是否声明部分告诉浏览器它正在读取哪个页面？无论如何，当我删除它一切正常。（顺便说一下，我的页面包含HTML5视频。）

Answer 1

尝试更改此

content_html = "<div style=\"padding:0;height:30px;margin:0;border:none;";

到这个

content_html = "<div style=\"padding:0;height:30px;margin:auto;border:none;";

Answer 2

doctype告诉浏览器要使用的HTML规范的版本，对于具有某些文档类型的不同浏览器，您可能会遇到不同的结果。

某些文档类型期望所有标记都被关闭，不使用自闭标记等。

通常这只会影响您的HTML，但如果您的JS正在创建HTML，那么它可能会间接受到影响。

Answer 3

这对于创建显示或隐藏的弹出窗口来说太过分了。

通常只需要将默认CSS类显示的DIV包含为display:none，然后添加一个display:block或更多的新类，使用Jquery来切换类。

Answer 4

您可能想尝试更复杂的doctype定义。您可以在此处找到W3C的信息：http://www.w3.org/QA/2002/04/valid-dtd-list.html

另外，我的一些xhtml页面在最顶层使用xml定义标题：从这样开始：

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
       "http://www.w3.org/TR/html4/frameset.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Javascript弹出窗口 - 更新

4 个答案: