Goolge Adsense Style Popup

This is the base structure of most web pages that use HTML.

Add the following code inside the tag:

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

* < padding: 0; margin: 0; text-decoration: unset; list-style: none; font-family: 'Poppins', sans-serif; >html, body < width: 100%; height: 100%; background: url(bg.jpg) no-repeat center / cover; position: relative; overflow-x: hidden; display: flex; align-items: center; justify-content: center; >.click-me a < color: #ffffff; padding: 5px 20px; background: rgb(255 255 255 / 20%); border-radius: 50px; >/* Adsense style popup */ svg < width: 1.2em; height: 1.2em; >div#ad_position_box button < background: transparent; border: unset; font-size: 20px; cursor: pointer; >.flex-row < display: flex; align-items: center; justify-content: space-between; >div#ad_position_box < display: none; align-items: center; justify-content: center; height: 100%; width: 100%; position: fixed; top: 50%; transform: translateY(-50%); backdrop-filter: blur(50px); >div#ad_position_box.active < display: flex; >div#ad_position_box .card < background: #fff; padding: 10px 24px 25px; border-radius: 6px; position: relative; box-shadow: 0px 8px 12px rgb(60 64 67 / 15%), 0px 4px 4px rgb(60 64 67 / 30%); >.ad-content < display: block; box-shadow: 0px 10px 22px rgb(0 0 0 / 65%); >.ad-content img

Step 4 — Add some line of jQuery code inside main js file

$(".click-me a").click(function()< $("#ad_position_box").addClass("active"); >); $(".skip").click(function()< $("#ad_position_box").removeClass("active"); >);

#Final Result

Best Collection of Popup design

#1 Morphing Modal Window

Morphing Modal Window design using HTML CSS and JavaScript, which was developed by CodyHouse . Moreover, you can customize it according to your wish and need.

#2 Simple blob radius html popup animation

Simple blob radius html modal animation using HTML CSS and JavaScript, which was developed by Giana. Moreover, you can customize it according to your wish and need.

#3 Animated Modal Box

Awesome Modal Box Design using HTML CSS and JavaScript, which was developed by lefoy. Moreover, you can customize it according to your wish and need.

#4 ModalX Animated Modal

ModalX Animated Modals using HTML CSS and JavaScript, which was developed by Christopher Bicudo. Moreover, you can customize it according to your wish and need.

#5 CSS only Popup no JavaScript

Simple CSS only Popup no JavaScript, which was developed by Timothy Long. Moreover, you can customize it according to your wish and need.

Table of Contents

• 1. What Is an HTML Popup?
• 2. A Simple Guide to create Popup Like AdSense Ad Style
• 2.1. Step 1 — Creating a New Project
• 2.2. Step 2 — Setting Up the basic structure
• 2.3. Step 3 — Adding Styles for the Classes
• 2.4. Step 4 — Add some line of jQuery code inside main js file
• 2.5. #Final Result
• 3. How To Make a Modal Box With HTML, CSS and JavaScript
• 3.6. #1) Add HTML:
• 3.7. #2) Add CSS:
• 3.8. #3) Add JavaScript:
• 4. How to launch Bootstrap modal on page load
• 4.9. Simple Example:
• 5. Best Collection of Popup design
• 5.10. #1 Morphing Modal Window
• 5.11. #2 Simple blob radius html popup animation
• 5.12. #3 Animated Modal Box
• 5.13. #4 ModalX Animated Modal
• 5.14. #5 CSS only Popup no JavaScript

Источник

Как создать всплывающие окна (pop-up) на сайте

Узнайте, как создать всплывающие окна (pop-up) на вашем сайте с помощью HTML, CSS и JavaScript в этой практической статье для новичков!

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

HTML

Для начала нам нужно создать базовую разметку для всплывающего окна. Сначала создадим контейнер, который будет затемнять фон страницы и содержать само всплывающее окно:

CSS

Теперь добавим стили для затемнения фона и отображения всплывающего окна:

По умолчанию контейнер с всплывающим окном скрыт с помощью display: none; . Мы изменим это свойство на display: block; , когда захотим показать всплывающее окно.

JavaScript

Чтобы показать и скрыть всплывающее окно, добавим следующий код JavaScript:

const popupOverlay = document.getElementById("popup-overlay"); const popup = document.getElementById("popup"); function showPopup() < popupOverlay.style.display = "block"; >function hidePopup() < popupOverlay.style.display = "none"; >popupOverlay.addEventListener("click", hidePopup); popup.addEventListener("click", (event) => event.stopPropagation());

Функция showPopup делает всплывающее окно видимым, а функция hidePopup – скрывает его. Мы также добавили обработчик событий, чтобы при клике на затемненный фон всплывающее окно закрывалось.

Пример использования

Теперь, когда у нас есть код для работы с всплывающими окнами, давайте добавим кнопку на страницу, чтобы открыть окно, и добавим содержимое внутрь всплывающего окна:

Открыть всплывающее окно 
 
Пример всплывающего окна
 
Это пример всплывающего окна с использованием HTML, CSS и JavaScript. 😊
 Закрыть окно 
 
 

Теперь, когда пользователь нажимает на кнопку «Открыть всплывающее окно», появляется всплывающее окно, а при нажатии на кнопку «Закрыть окно» или вне всплывающего окна, оно закрывается.

Вот так просто можно создать всплывающие окна на сайте. Надеюсь, этот материал помог вам разобраться в теме! 😃

Источник