php 在页面加载时将图像显示为弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19211244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display image as popup on page load
提问by John Smith
I am learning php and totally unfamiliar with javascript. but i want to know how to generate a popup having some text and image.(If it is HTML formatting allowed, it will be fine for me)
我正在学习 php 并且完全不熟悉 javascript。但我想知道如何生成一个包含一些文本和图像的弹出窗口。（如果允许 HTML 格式，对我来说没问题）
I want to generate a popup message each time page loads, like here www.000webhost.com, each time we open/refresh the home page of 000webhost.com an image is displayed. How I can do this ?
我想在每次页面加载时生成一个弹出消息，就像这里的 www.000webhost.com，每次我们打开/刷新 000webhost.com 的主页时都会显示一个图像。我怎么能做到这一点？
回答by Basim Khajwal
回答by Nimeshka Srimal
I'm sorry for posting on this sleeping questions...though the question sleeps, the requirement still rises :) Exactly today I wanted to do this, and i was not like wanted to use large js files to a simple popup..while searching I found colorbox plugin and digging somewhat further, I found this articlewhich explains how to use it.
我很抱歉在这个睡眠问题上发帖...虽然问题睡着了，但要求仍然上升:) 正是今天我想这样做，而且我不想使用大型 js 文件来简单的弹出窗口..而搜索我找到了 colorbox 插件并进一步挖掘，我发现这篇文章解释了如何使用它。
Here is the function,
这是功能，
<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>
Hope this will be helpful to someone in future..I wanted to post it here because I noticed this question is being viewed 8000+ times..So everybody is still looking for a solid solution.
希望这对将来的某人有所帮助..我想在这里发布它，因为我注意到这个问题被查看了 8000 多次..所以每个人仍在寻找可靠的解决方案。
回答by Rajesh
I always use jQuery uipopup. I have created a working example for you at http://jsfiddle.net/8kAJr/
我总是使用jQuery ui弹出窗口。我在http://jsfiddle.net/8kAJr/为您创建了一个工作示例
Add any html content inside the div. For more info on jQuery ui, visit http://jqueryui.com/dialog/
在 .html 文件中添加任何 html 内容div。有关 jQuery ui 的更多信息，请访问http://jqueryui.com/dialog/
回答by lukaleli
Just create an appropriate html container with content you want to display, style it with css and add a display: noneproperty to that. And your javascript is as simply as:
只需创建一个合适的 html 容器，其中包含要显示的内容，使用 css 设置样式并为其添加display: none属性。你的javascript就像：
document.addEventListener('DOMContentLoaded', function(){
var popup = document.querySelectorAll('[your element selector]')[0];
popup.style.display = 'block';
}, false);
You should also add some ability to close it, but this is not the scope of your question. And I'm against unnecessary big UI libraries that let you create very simple modal quite simply and providing a lot more and not needed source code. It's just an overhead.
您还应该添加一些关闭它的功能，但这不是您问题的范围。而且我反对不必要的大型 UI 库，它们让您可以非常简单地创建非常简单的模态并提供更多不需要的源代码。这只是一个开销。
