PopUP Javascript菜单
PopUP Javascript菜单
提问于 2012-03-21 18:08:13
总之，我已经创建了一个html5文件，当单击某个href时，会以一种平滑的方式弹出一个图像。到目前为止，它对我来说不起作用，当点击它时，它会打开一个新的web浏览器，但这不是我需要的。我需要它变得开放，通过淡出背景和发光，就像facebook的效果。
我的Javascript代码：
xhttp=new XMLHttpRequest();
// alert("step 1");
xhttp.open("GET","xml/emp2.xml",false);
}
xhttp.send("");
xmlDoc=xhttp.responseXML;
var TestP = new Array();
function loadImg(n){
TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
var img = document.createElement('img');
/////////alert(TestP[n]);
img.src = TestP[n];
/////////alert(n);
/////////alert(TestP[n]);
//document.getElementById('right').appendChild(img);
elem = document.getElementById('right');
/////////alert(document.getElementById( 'right' ).firstChild);
child = elem.firstChild;
/////////alert(child);
if ( child )
elem.replaceChild(img, child);
else
elem.appendChild( img );
//for(var i =0; i<10 ; i++){
//TestP[i] = xmlDoc.documentElement.childNodes[(i*2)+1].textContent;
//var img = document.createElement('img');
//img.src = TestP[i];
//document.body.appendChild(img);
//}
//////////////////////////////////////////////////////////////////////////Write to another Window ///////////////////////////////////////////////////////////////////////////
function OpenNewWindow(n, width, height)
{
if( navigator.appName == "Microsoft Internet Explorer"){
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
xhttp.open("GET","http://www.multimediaprof.com/test/emp2.xml",false);
}
else if(navigator.appName == "Netscape"){
xhttp=new XMLHttpRequest();
// alert("step 1");
xhttp.open("GET","xml/emp2.xml",false);
}
xhttp.send("");
xmlDoc=xhttp.responseXML;
var TestP = new Array();
TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
var img = document.createElement('img');
/////////alert(TestP[n]);
img.src = url="pic/"+ TestP[n];
alert(img.src);
/////////alert(n);
/////////alert(TestP[n]);
//document.getElementById('right').appendChild(img);
///elem = document.getElementById('right');
/////////alert(document.getElementById( 'right' ).firstChild);
//child = elem.firstChild;
/////////alert(child);
alert(TestP[n]);
var newWindow = window.open("", "pictureViewer", "location=no, directories=no, fullscreen=no, menubar=no, status=no, toolbar=no, width=" + width + ", height=" + height + ", scrollbars=no");
newWindow.document.writeln("<html>");
newWindow.document.writeln("<body style='margins: 0 0 0 0;'>");
newWindow.document.writeln("<a href='javascript:window.close();'>");
newWindow.document.writeln("<img src='" + img.src + "' alt='Click to close' id='bigImage' border='0'/>");
newWindow.document.writeln("</a>");
newWindow.document.writeln("</body></html>");
newWindow.document.close();
}我的html代码片段：
<div class="arrowlistmenu">
<div id="container">
<div id="center">
<h3 class="menuheader expandable">Section 1</h3>
<ul class="categoryitems">
<!-- Create first Sub Element -->
<li id="sub">
<h3 style="text-align:center" class="menuheader2 expandable2">Chapter 1</h3>
<ul class="categoryitems2" >
<li><a href="#" onClick="OpenNewWindow(1,800, 600)">Part 1</a></li>有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-03-21 18:28:43
看起来你想要像http://www.shadowbox-js.com/这样的东西
有很多jQuery插件可以大致实现您所描述的功能。在这里，用普通的javascript重新发明它看起来不是一个好主意。
Stack Overflow用户
发布于 2012-03-21 18:20:02
我是否可以建议使用jQuery和jQuery UI对话框？http://jqueryui.com/demos/dialog/#modal
执行此操作的一般步骤：
- 将createElement代码更改为正常的html代码OnDomReady使用
$('#dialogDiv').dialog({modal: true});(根据jQueryUI示例页面) - Attach event打开Part 1(等)的对话框链接：
$('#Part1').click(function() {$('#dialogDiv').dialog('open');});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9802349
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号