• Ogłoszenie:

How to create a pop-up window?

Wszystko odnośnie tworzenia grafiki - obróbka, problemy, oceny.
Tworzenia Stron internetowych - HTML, PHP, MySQL...

How to create a pop-up window?

Postprzez TatwanFilemdar 01 Maj 2023, 05:50

reklama
In essence, I aim to generate a hyperlink that would launch a smaller window on top of one of my website pages, which could be closed by clicking outside of it. I intend to place this feature in my navigation bar, enabling me to open it on any page and swiftly close it without leaving the window open in the background.
TatwanFilemdar
~user
 
Posty: 14
Dołączenie: 10 Mar 2023, 15:44



How to create a pop-up window?

Postprzez TatwanFilemdar 06 Gru 2023, 09:40

To create a hyperlink that opens a smaller window on top of one of your website pages, you can use JavaScript and CSS. Here's a basic example of how to achieve this:

HTML:

HTML
<div id="overlay" class="hidden">
<p>This is the content of the overlay window.</p>
<button id="closeOverlay">Close</button>
</div>
<a href="#" id="openOverlay">Open Overlay</a>

CSS:

CSS
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 100;
display: none;
}

.hidden {
display: none;
}

JavaScript:

JavaScript
const overlay = document.getElementById('overlay');
const openOverlayButton = document.getElementById('openOverlay');
const closeOverlayButton = document.getElementById('closeOverlay');

openOverlayButton.addEventListener('click', (event) => {
event.preventDefault();
overlay.classList.remove('hidden');
});

closeOverlayButton.addEventListener('click', (event) => {
overlay.classList.add('hidden');
});

This code will create a hidden overlay element with a fixed position that covers the entire viewport. When the user clicks the "Open Overlay" link, the overlay will be displayed. Clicking outside of the overlay or on the "Close" button will hide the overlay.

You can customize the appearance and behavior of the overlay by modifying the CSS and koows JavaScript koows code. For example, you can change the size of the overlay, add more content to it, and style it to match your website's design.
TatwanFilemdar
~user
 
Posty: 14
Dołączenie: 10 Mar 2023, 15:44




Powróć do Grafika & Webmastering

Kto jest na forum

Użytkownicy przeglądający to forum: Brak zarejestrowanych użytkowników oraz 6 gości