PopUP Javascript菜单

Question

hy all, I have created an html5 file that should when clicked on a certain href pop's up an image in a smooth way. 毕竟，我已经创建了一个html5文件，当单击某个href弹出窗口时，该文件应该可以平滑地显示图像。 Till now it didn't work with me, that's when clicked, it opens up a new web browser, but that's not what i need. 到现在为止，它对我不起作用，那就是单击时它会打开一个新的Web浏览器，但这不是我所需要的。 I need it to fade open, by fading out the background and glowing, like the facebook effect. 我需要通过淡化背景和发光来使其淡入淡出，就像Facebook效果一样。

My Javascript code : 我的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();

}

My html snippet : 我的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>

Any ideas?? 有任何想法吗？？

Answer 1

It looks like you want something like http://www.shadowbox-js.com/ 看来您想要类似http://www.shadowbox-js.com/的内容

There are a lot of jQuery plugins that does roughly what you're describing. 有很多jQuery插件可以大致满足您的描述。 Inventing it all over in plain javascript looks like a bad idea here. 用普通的javascript全面发明它似乎是个坏主意。

Answer 2

Can I suggest using jQuery and jQuery UI dialogs? 我可以建议使用jQuery和jQuery UI对话框吗？ http://jqueryui.com/demos/dialog/#modal http://jqueryui.com/demos/dialog/#modal

General steps to do this: 一般步骤如下：

Change the createElement code to normal html code <div id="dialogDiv"><img src=... 将createElement代码更改为普通的html代码<div id="dialogDiv"><img src=...
In OnDomReady use $('#dialogDiv').dialog({modal: true}); 在OnDomReady中使用$('#dialogDiv').dialog({modal: true}); (as per jQueryUI example page) （根据jQueryUI示例页面）
Attach event to open dialog to your Part 1 (etc.) link(s): $('#Part1').click(function() {$('#dialogDiv').dialog('open');}); 将事件附加到打开对话框的第1部分（等）链接中： $('#Part1').click(function() {$('#dialogDiv').dialog('open');});

PopUP Javascript菜单

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-03-21 10:28:43

解决方案2
1 2012-03-21 10:20:01

PopUP Javascript菜单

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-03-21 10:28:43

解决方案2 1 2012-03-21 10:20:01

解决方案1
2 已采纳 2012-03-21 10:28:43

解决方案2
1 2012-03-21 10:20:01