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

Question

我正在学习 php，完全不熟悉 javascript。但我想知道如何生成包含一些文本和图像的弹出窗口。（如果允许 HTML 格式，对我来说没问题）

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

Answer 1

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

Answer 2

我很抱歉在这个沉睡的问题上发帖......虽然问题沉睡了，但要求仍然上升:) 正是今天我想这样做，我不想使用大型 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 多次..所以每个人仍在寻找一个可靠的解决方案。

Answer 3

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

在div. 有关 jQuery ui 的更多信息，请访问http://jqueryui.com/dialog/

Answer 4

只需创建一个包含您要显示的内容的适当 html 容器，使用 css 对其进行样式设置并为其添加一个display: none属性。你的javascript很简单：

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

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