在页面加载时将图像显示为弹出窗口


Display image as popup on page load

我正在学习php,完全不熟悉javascript。 但是我想知道如何生成一个带有一些文本和图像的弹出窗口。如果允许HTML格式,对我来说会很好)

我想在每次页面加载时生成一条弹出消息,就像这里 www.000webhost.com,每次我们打开/刷新 000webhost.com 的主页时,都会显示一个图像。我该怎么做?

我建议使用其中一个灯箱插件,它们简单易用,需要最少的javascript或jquery知识。

我很

抱歉发布这个睡眠问题......虽然问题仍然存在,但要求仍然上升:)就在今天,我想这样做,我不想在简单的弹出窗口中使用大型js文件。在搜索时,我发现了colorbox插件并进一步挖掘,我找到了这篇文章,其中解释了如何使用它。

这是函数,

 <link href="popup/colorbox.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="popup/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.fn.colorbox({href:"popup/popup_image.jpg", open:true});
});
</script> 

希望这对将来有人有帮助。我想在这里发布它,因为我注意到这个问题被浏览了 8000+ 次。所以大家还在找一个坚实的解决方案。

我总是使用jQuery ui弹出窗口。我在 http://jsfiddle.net/8kAJr/为您创建了一个工作示例

div中添加任何 html 内容。有关 jQuery UI 的更多信息,请访问 http://jqueryui.com/dialog/

只需创建一个适当的 html 容器,其中包含您想要显示的内容,使用 css 设置其样式并为其添加 display: none 属性即可。你的JavaScript就像

document.addEventListener('DOMContentLoaded', function(){
    var popup = document.querySelectorAll('[your element selector]')[0];
    popup.style.display = 'block';
}, false);

还应该添加一些功能来关闭它,但这不是您问题的范围。我反对不必要的大型UI库,这些库可以让您非常简单地创建非常简单的模式,并提供更多不需要的源代码。这只是一个开销。