Pop up html windows

How TO — CSS/JS Modal

Learn how to create a Modal Box with CSS and JavaScript.

How To Create a Modal Box

A modal is a dialog box/popup window that is displayed on top of the current page:

Modal Header

Step 1) Add HTML:

Example

class=»modal» is a container element for the modal and the div with class=»modal-content» is where you put your modal content (headings, paragraphs, images, etc).

The element with class=»close» should be used to close the modal.

Step 2) Add CSS:

Example

/* The Modal (background) */
.modal display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
>

/* Modal Content/Box */
.modal-content background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
>

/* The Close Button */
.close color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
>

.close:hover,
.close:focus color: black;
text-decoration: none;
cursor: pointer;
>

The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.

Add a black background color with opacity.

Set position to fixed; meaning it will move up and down the page when the user scrolls.

It is hidden by default, and should be shown with a click of a button (we’ll cover this later).

The .modal-content class

This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).

We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.

The .close class

The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.

Step 3) Add JavaScript:

Example

// Get the modal
var modal = document.getElementById(«myModal»);

// Get the button that opens the modal
var btn = document.getElementById(«myBtn»);

// Get the element that closes the modal
var span = document.getElementsByClassName(«close»)[0];

// When the user clicks on the button, open the modal
btn.onclick = function() modal.style.display = «block»;
>

// When the user clicks on (x), close the modal
span.onclick = function() modal.style.display = «none»;
>

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) if (event.target == modal) modal.style.display = «none»;
>
>

Add Header and Footer

Add a class for modal-header, modal-body and modal-footer:

Example

Style the modal header, body and footer, and add animation (slide in the modal):

Example

/* Modal Header */
.modal-header padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Modal Footer */
.modal-footer padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Modal Content */
.modal-content position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
>

Bottom Modal («Bottom sheets»)

An example on how to create a full-width modal that slides in from the bottom:

Example

Tip: Also check out Modal Images and Lightbox.

Источник

Creating pop-up windows by using HTML and JavaScript

Pop-ups windows are some of the most common UI elements that we can find in websites. Sometimes it’s useful to add a pop-up to your pages. You can use it, for example, to create a contact forms (sign-up boxes), photo galleries, or for areas of your website that you might need a link containing “more information”.

In this article, you’ll see how easy it is to create a small pop-up windows, and put it on the center of screen variable to the currently selected screen resolution, by using only the HTML and JavaScript.

You can use a target=»_blank» in the tag, but this simply opens a new browser window that completely obscures the old one. This may be what you want, but at other times a small window on center of the large browser window is much better. This small window is popularly known as a pop-up. Using the HTML and JavaScript, you can create a pop-up window that appears when a user clicks a specific word, phrase, or graphic in a topic. This example is based on the JavaScript window open() method. By simply embedding a small snippet of code in your website and creating a unique link, you have complete control over the exact pixel dimensions of a link that opens in a new window.

Add this javascript into the body (to the head) of your HTML document or preferably to an external javascript file:

script language="JavaScript"> /** * Open centered pop-up window * By Arthur Gareginyan (https://www.arthurgareginyan.com) * For full source code, visit https://mycyberuniverse.com * * @param URL - specifies the URL of the page to open. If no URL is specified, a new window with about:blank will be opened * @param windowName - specifies the target attribute or the name of the window (_blank, _parent, _self, _top, name) * @param windowWidth - the window width in pixels (integer) * @param windowHeight - the window height in pixels (integer) */ function popUpWindow(URL, windowName, windowWidth, windowHeight)  var centerLeft = (screen.width/2)-(windowWidth/2); var centerTop = (screen.height/2)-(windowHeight/2); var windowFeatures = 'toolbar=no, location=no, directories=no, status=no, menubar=no, titlebar=no, scrollbars=no, resizable=no, '; return window.open(URL, windowName, windowFeatures +' width='+ windowWidth +', height='+ windowHeight +', top='+ centerTop +', left='+ centerLeft); > /script> 

Feature	Description
directories=yes|no|1|0	Obsolete. Whether or not to add directory buttons. Default is yes. IE only
height=pixels	The height of the window. Min. value is 100
left=pixels	The left position of the window. Negative values not allowed
location=yes|no|1|0	Whether or not to display the address field. Opera only
menubar=yes|no|1|0	Whether or not to display the menu bar
resizable=yes|no|1|0	Whether or not the window is resizable. IE only
scrollbars=yes|no|1|0	Whether or not to display scroll bars. IE, Firefox & Opera only
status=yes|no|1|0	Whether or not to add a status bar
titlebar=yes|no|1|0	Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box
toolbar=yes|no|1|0	Whether or not to display the browser toolbar. IE and Firefox only

Add the link to any objects that you want to act as a pop-up window.

In Adobe Muse you can use hyperlink code for objects:

javascript:popUpWindow('http://www.your-site.com','Example','700','600') 

For else cases you can use one of the following hyperlinks (both are the same):

 onclick="popUpWindow('http://www.your-site.com','Example','700','600');" href="javascript:void(0);">CLICK TO OPEN POP-UP 

 href="javascript:popUpWindow('http://www.your-site.com','Example','700','600')">CLICK TO OPEN POP-UP 

Note: Replace the http://www.your-site.com with your link to page. Replace the Example with name of the window ( _blank , _parent , _self , _top , name). Replace the ‘700’ and ‘600’ with needed size of the pop-up window.

Note: This function doesn’t work on a dual monitor setup.

Demo

If you want to see a working example of this code then click the following:

About

My Cyber Universe was founded in May 2013 by Arthur Gareginyan, a designer and full stack software engineer. Main goal is to be the source for anyone who wants to learn the web design, software and web development.

Subscribe

Subscribe to our Newsletter and get new posts delivered to your inbox — free!

© 2013-2022 Project by Space X-Chimp™. All rights reserved.

Источник

Create a Popup Window Using HTML, CSS, and JavaScript

Popup windows are ubiquitous online, but they’re not all bad. Learn how to create a well-behaved popup with standard web technologies.

Readers like you help support MUO. When you make a purchase using links on our site, we may earn an affiliate commission. Read More.

Well-designed popup windows make your website more interactive and modern. They can create markets and boost sales for businesses.

You can create popup windows with HTML, CSS, and JavaScript. Use the following guide to create and style a popup window from scratch. It makes your website interactive and creates great user experiences.

Write HTML to Structure the Content

Let’s write some HTML code that has a hidden modal window that pops up when you click a button. In this case, you will display the meaning of the word Hello! The popup window will have a heading and some content.

Immediately you trigger the modal window, a blurry effect is cast on the background. Add classes to the sections that you will use to select the modal later on in JavaScript.

body> 
button class="open-modal">Hello! button>
 
div class="modal-content hidden-modal"> 
div class="modal-header"> 
h3>Meaning of Hello! h3> 
button class="close-modal">× button> 
div>
 
div class="modal-body"> 
p>Hello is a greeting in the English language. It is used at 
the start of a sentence as an introduction whether in person or 
on the phone. p> 
div> 
div> 
 
div class="blur-bg hidden-blur"> div> 
script src="script.js"> script> 
body> 

The page should appear like so:

You can also want to investigate the HTML dialog element if you’re looking to use the most semantic markup. ​

Write CSS to Add Style

Use CSS to format the popup window. Place the window at the center of the webpage against a black background, so it’s clearly visible. You will also style the window, its background, and font size.

First, create a uniform style for the whole page by setting the margin, padding, and line-height. Then align the body elements at the center on a back background.

* margin: 0; 
padding: 0; 
box-sizing: border-box; 
line-height: 1;
>

body height: 100%; 
display: flex; 
justify-content: center; 
flex-direction: column; 
align-items: center; 
background: #000; 
gap: 30px;
> 

Next, style the open-modal button. Give it a different background color from the rest of the page so that it stands out. Also, set its font color, size, padding, and a transition time.

.open-modal background: #20c997; 
color: #fff; 
border: none; 
padding: 20px 40px; 
font-size: 48px; 
border-radius: 100px; 
cursor: pointer; 
transition: all 0.3s; 
outline: none;
>

.open-modal:active transform: translateY(-17px);
> 

Then, style the modal content that will display when the window opens. Set a white background, give it a smaller width than the body, and add padding.

Also give it a z-index, so it appears in front of the open-modal button. Additionally, set the hidden-modal display as none, so it stays hidden until you trigger it.

.modal-content background: #ccc; 
width: 500px; 
padding: 20px; 
border-radius: 10px; 
z-index: 99;
>

.modal-header display: flex; 
justify-content: space-between; 
margin-bottom: 16px; 
color: #000; 
font-size: 30px;
>

.modal-body p < 
font-size: 22px; 
line-height: 1.5; 
> 

.hidden-modal < 
display: none; 
> 

Then style the close-modal button with a transparent background and align it at the center.

.close-modal background: transparent; 
border: none; 
display: flex; 
align-items: center; 
justify-content: center; 
height: 20px; 
width: 20px; 
font-size: 40px;
>

.close-modal:hover color: #fa5252;
> 

Lastly, style the blur element that will cast on the background when the window opens. It will have maximum height and width and a background filter. Set the blur as none, so it’s not visible until the window opens.

.blur-bg position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
>

.hidden-blur display: none;
>

After adding in the CSS, the page should look like this:

Источник