Question

总而言之，我已经创建了一个html5文件，应该在点击某个href pop时以平滑的方式显示图像。直到现在它没有与我合作，点击它，它打开了一个新的网络浏览器，但这不是我需要的。我需要它通过淡出背景和发光来消失，就像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>

任何想法??

Answer 1

看起来你想要像http://www.shadowbox-js.com/

这样的东西

有很多jQuery插件大致与你所描述的一样。在普通的javascript中发明它看起来像是一个坏主意。

Answer 2

我可以建议使用jQuery和jQuery UI对话框吗？ http://jqueryui.com/demos/dialog/#modal

执行此操作的一般步骤：

将createElement代码更改为普通的html代码<div id="dialogDiv"><img src=...
在OnDomReady中使用$('#dialogDiv').dialog({modal: true});（根据jQueryUI示例页面）
将事件附加到第1部分（等）链接的打开对话框：$('#Part1').click(function() {$('#dialogDiv').dialog('open');});

PopUP Javascript菜单

2 个答案: