Javascript pop-up window -updated
I copied this code from "www.hotscripts.com", http://www.advancebydesign.com/itemdetails.php?item=15. What it does it just displays a simple window in the middle of the screen.
3 very simple steps are required:
1) create a button <input type="button" onclick='Javascript:my_box.Show();' value="Show Popup Box">
2)include this into head <script language="Javascript" type="text/Javascript" src="jscpopupbox.js"></script>
3) and also this added to the head:
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;
What I dont get is why the windows on my website appear on the upper left corner, instead in the middle. I haven't touched the source code, and when I try it on a plain HTML page it seems to work. Is my CSS interfering?
I removed all the CSS from my website, and eventually I found out that the problem was not it, but this <!DOCTYPE HTML> on top of the page. What does this has to do with the javascript section? Isn't the declaration part that tells the browser what page it is reading? anyway, when i delete it everythi开发者_StackOverflow社区ng work fine. (btw my page includes HTML5 Video.)
try changing this
content_html = "<div style=\"padding:0;height:30px;margin:0;border:none;";
to this
content_html = "<div style=\"padding:0;height:30px;margin:auto;border:none;";
The doctype tells the browser what version of the HTML spec to to use, you may experience differing results with different browsers with certain doctypes.
Some doctypes expect all tags to be closed, do/don't work with self closing tags etc.
Generally this will only affect your HTML, but if your JS is creating HTML then it can be affected indirectly.
This is overkil for creating a popup that is shown or hidden.
Normally just include the DIV that you want to show with a default CSS class as display:none then either add a new class with display:blockor more cleanly use Jquery to toggle the classes.
You might want to try a more sophisticated doctype definition. You'll find info from the W3C here: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Also, some of my xhtml pages use an xml definition header at the very top: starting something like this:
<?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">
加载中,请稍侯......
精彩评论