ajax图像onload弹出窗口

时间:2012-07-24 12:59:46

标签: ajax popup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

<script type="text/javascript">

function loadXMLDoc()
{

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    window.alert(xmlhttp.responseText);

    }

  }
xmlhttp.open("GET","popup.html",true);

xmlhttp.send();

}
</script>
</head>
<body onload="javascript:loadXMLDoc()">

<div id="myDiv"><h2>AJAX image popup</h2></div>

</body>
</html>

实际上我想在joomla页面上使用它,但我无法获得任何扩展来这样做,所以我创建了这个脚本,但弹出窗口显示html而不是页面代码中的图像。 我也试图直接获取图像,但它无法显示它。

我想要实现的只是在页面加载时弹出一个图像。

亲切的问候。

1 个答案:

答案 0 :(得分:0)

从JavaScript alert()功能实现的标准浏览器“弹出窗口”无法显示图像。这只是纯文本。

您可以显示包含呈现HTML的“弹出窗口”的一种方法是使用jQuery UI Dialog。这实际上在页面上创建了一个模态div,它模仿了DOM范围内“弹出窗口”的功能。 div可以包含您想要的任何HTML:

<script>
    $(function() {
        $( "#dialog" ).dialog();
    });
</script>
<div id="dialog" title="Basic dialog">
    <!-- put your markup here -->
</div>