Отображать изображение как всплывающее окно на странице load

Question

Я изучаю php и совершенно незнакомый с javascript. но я хочу знать, как сгенерировать всплывающее окно с некоторым текстом и изображением. (Если это HTML-форматирование разрешено, это будет хорошо для меня)

Я хочу создать всплывающее сообщение при каждой загрузке страницы, например здесь www .000webhost.com, каждый раз, когда мы открываем/обновляем домашнюю страницу 000webhost.com, отображается изображение. Как я могу это сделать?

Answer 1

Просто создайте соответствующий контейнер html с содержимым, которое вы хотите отобразить, настройте его с помощью css и добавьте к нему свойство display: none. И ваш браузер так просто, как:

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

Вы должны также добавить возможность закрыть его, но это не сфера вашего вопроса. И я против ненужных больших библиотек пользовательского интерфейса, которые позволяют вам создавать очень простые модальные просто и предоставить гораздо больше и не нужен исходный код. Это просто накладные расходы.

Answer 2

Я бы рекомендовал использовать один из плагинов lightbox, который прост и прост в использовании и требует минимального знания javascript или jquery.

Answer 3

Я всегда использую jQuery ui всплывающее окно. Я создал рабочий пример для вас: http://jsfiddle.net/8kAJr/

Добавить любой html-контент внутри div. Для получения дополнительной информации о jQuery ui посетите http://jqueryui.com/dialog/

Answer 4

Прошу прощения за размещение на этих спящих вопросах ... хотя вопрос спит, требование по-прежнему растет :) Точно сегодня я хотел сделать это, и мне не понравилось хотел использовать большие 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> 

Надеется, что это будет полезно для кого-то в future..I хотел отправить его здесь, потому что я заметил, этот вопрос рассматривается times..So все 8000 + еще ища твердое решение.