Question

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

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

Answer 1

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

Answer 2

我很遗憾在这个沉睡的问题上张贴......虽然问题在睡觉，但要求仍在提高:)今天我想要做到这一点，我不喜欢用大js文件到一个简单的弹出窗口..搜索时我发现了colorbox插件并进一步挖掘，我找到this article来解释如何使用它。

这是函数，

 <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

只需使用要显示的内容创建一个合适的html容器，使用css设置样式并为其添加display: none属性。你的javascript简单如下：

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

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

Answer 4

我总是使用jQuery ui弹出窗口。我在http://jsfiddle.net/8kAJr/

为您创建了一个工作示例

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

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

4 个答案: