Простой учебник по всплывающим окнам

Создание всплывающего окна — очень простое дополнение к любой веб-странице. В этом уроке я покажу вам, как создать всплывающее окно, используя базовый HTML, JavaScript и CSS. Первое, о чем мы хотим подумать, это то, что мы хотим сделать, чтобы вызвать всплывающее окно. Вы можете инициировать событие практически для чего угодно, например, для кнопки, ссылки или нажатия клавиши. В этом уроке мы будем нажимать кнопку, чтобы вызвать всплывающее окно.

Что вам понадобится:

Текстовый редактор, например notepad++ или Sublime Text Editor — выберите текстовый редактор, в котором вы предпочитаете писать код.
Базовые знания HTML, JavaScript, CSS

Приступим к созданию всплывающего окна

<html>
<head>
  <title>A Simple Popup</title>
</head>
<body>
<div id="maincontent">
    <h1>Page Content<h2>
</div>
<div id="overlay"></div>
<div id="popup">
    <div class="popupcontent">
        <h1>Some Popup Content</h1>
    </div>
</div>
</body>
</html>

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

<html>
<head>
  <title>A Simple Popup</title>
  <style>
    #overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        background: #999;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        z-index: 100;
    }

    #popup {
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        width: 500px;
        height: 500px;
        margin-left: -250px; /*Half the value of width to center div*/
        margin-top: -250px; /*Half the value of height to center div*/
        z-index: 200;
    }
  </style>
</head>
<body>
<div id="maincontent">
    <h1>Page Content<h2>
</div>
<div id="overlay"></div>
<div id="popup">
    <div class="popupcontent">
        <h1>Some Popup Content</h1>
    </div>
</div>
</body>
</html>

Теперь мы добавили немного CSS для оверлея и всплывающего окна. На данный момент мы можем видеть белую рамку над нашим серым наложением. Мы добавили тег h1 во всплывающее окно, заголовок страницы и некоторый контент основной страницы. Теперь мы должны увидеть что-то вроде этого:

Далее давайте добавим элемент управления, чтобы закрыть это всплывающее окно. Мы добавим диапазон, содержащий X, по которому мы можем щелкнуть, чтобы закрыть это всплывающее окно, и JavaScript для обработки этого события.

<html>
<head>
  <title>A Simple Popup</title>
  <style>
    #overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        background: #999;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        z-index: 100;
    }

    #popup {
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        width: 500px;
        height: 500px;
        margin-left: -250px; /*Half the value of width to center div*/
        margin-top: -250px; /*Half the value of height to center div*/
        z-index: 200;
    }

    #popupclose {
        float: right;
        padding: 10px;
        cursor: pointer;
    }
  </style>
</head>
<body>
<div id="maincontent">
    <h1>Page Content<h2>
</div>
<div id="overlay"></div>
<div id="popup">
    <div class="popupcontrols">
        <span id="popupclose">X</span>
    </div>
    <div class="popupcontent">
        <h1>Some Popup Content</h1>
    </div>
</div>
<script type="text/javascript">
    // Initialize Variables
    var closePopup = document.getElementById("popupclose");
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
 
    // Close Popup Event
    closePopup.onclick = function() {
        overlay.style.display = 'none';
        popup.style.display = 'none';
    };
</script>
</body>
</html>

Теперь мы можем закрыть это всплывающее окно…. Ах, это мило. Здесь мы добавили наш X, чтобы щелкнуть, немного CSS для стилизации этой закрытой области. Кроме того, мы добавили javascript для обработки события щелчка, чтобы скрыть всплывающее окно. Сохраните файл как index.html и откройте его в браузере, чтобы проверить закрытие всплывающего окна. Вы заметите, что всплывающее окно отображается при первом открытии страницы. Давайте скроем это с помощью CSS при загрузке, чтобы нам нужно было что-то сделать, чтобы открыть его.

#overlay {
    display: none;
    ...
}
 
#popup {
    display: none;
    ...
}

После добавления дисплея: нет; к нашему оверлею и всплывающему окну, вы заметите, что при загрузке страницы в браузере мы их не видим. Чтобы показать это всплывающее окно, нам нужно что-то сделать, поэтому давайте создадим кнопку для нажатия и немного JavaScript для обработки этого события.

<html>
<head>
  <title>A Simple Popup</title>
  <style>
	#overlay {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		background: #999;
		width: 100%;
		height: 100%;
		opacity: 0.8;
		z-index: 100;
	}

	#popup {
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		background: #fff;
		width: 500px;
		height: 500px;
		margin-left: -250px; /*Half the value of width to center div*/
		margin-top: -250px; /*Half the value of height to center div*/
		z-index: 200;
	}

	#popupclose {
		float: right;
		padding: 10px;
		cursor: pointer;
	}

	.popupcontent {
		padding: 10px;
	}

	#button {
		cursor: pointer;
	}
  </style>
</head>
<body>
<div id="maincontent">
    <h1>Page Content<h2>
    <button id="button">Show Popup</button>
</div>
<div id="overlay"></div>
<div id="popup">
    <div class="popupcontrols">
        <span id="popupclose">X</span>
    </div>
    <div class="popupcontent">
        <h1>Some Popup Content</h1>
    </div>
</div>
<script type="text/javascript">
	// Initialize Variables
	var closePopup = document.getElementById("popupclose");
	var overlay = document.getElementById("overlay");
	var popup = document.getElementById("popup");
	var button = document.getElementById("button");
	// Close Popup Event
	closePopup.onclick = function() {
	  overlay.style.display = 'none';
	  popup.style.display = 'none';
	};
	// Show Overlay and Popup
	button.onclick = function() {
	  overlay.style.display = 'block';
	  popup.style.display = 'block';
	}
</script>
</body>
</html>

Мы добавили кнопку в область основного контента. Чтобы показать всплывающее окно, мы добавили функцию JavaScript, чтобы изменить оверлей и наше всплывающее окно на display:block; при событии onclick. После внесения этих изменений нажмите на кнопку, чтобы открыть всплывающее окно.

Демо:

См. Pen OPmQMP Зои Карнеги (@zoie-loginradius) на CodePen.

Пожалуйста, оставляйте свои вопросы или отзывы в области комментариев.

Первоначально опубликовано на https://www.loginradius.com.

Простой учебник по всплывающим окнам

Похожие вопросы