Re-Usable Pop-Up with HTML and CSS

Popup re-use without javascript

If you want to re-use a pop-up dialog, such as a navigation menu, on many pages, it can be useful to hold the dialog as a web page in its own right. This frees you from a reliance on templates or server langauges and allows the use of simple tools to create and maintain it. Traditionally this is done using javascript, but that can be insecure and not everbody likes to either use or enable it. I needed a solution which uses only HTML and CSS, so it works even when the visitor has disabled javascript.

A solution

Try the button below (the outer box is just a notional positioning container for one or more such buttons).

It works like this:

1. The button hover styling (popbutton.hover) specifies how to find the popup box through its styling class (.popbox). The rest of the button styling isn't important, I just put it in to show that it can be added.
2. An iframe element is used to display another web page (demo-menu.html) within it, containing the popup box content. The iframe cannot inherit the size of its content, so it cannot adapt to lists of different lengths. Also, the CSS overflow attribute should control whether content can run on outside the iframe border, but is currently not implemented in some browsers. This poses a problem with code re-use when displaying pop-ups of different sizes, such as lists of different lengths.
   The workaround here is to create an overlarge transparent container for the iframe (div class="popbox") and then to size and style a smaller, visible box within the target content (div class="popup").
3. Another problem with iframes is the suppresson of scroll bars, which can sometimes appear unexpectedly. The CSS overflow attribute is also supposed to control this but mostly doesn't, so it is necessary to resort to the old HTML scrolling attribute.
4. The drop shadow sits outside the visible popup. But it is sized by it, so must be specified within the same page. This needs an additional transparent wrapper, this time in the pop-up page, which can size itself according to the content (body class="popup").

I have noticed that, in some browsers at least, iframe target pages need only contain HTML code fragments. I don't know whether this is part of the specification or, if so, whether or how they can reference external css. But it's easy enough to top-and-tail the code to create a valid web page, and it makes no difference to the display.

Code for the parent page

The basic code is given below, it is not quite the same as the code I use in this page because I have wrapped my blocki around this one.

CSS styling

.navbox-buttons {
	width:32em;
	padding:4pt; 
	border:2px solid silver;
}
.popbutton {
	position: relative;
	display: inline-block;
	border:1pt solid #8BC3CF;
	border-radius: 7pt;
	padding:3pt 8pt 4pt 8pt;
	background-color: #9BD3E7;
	color:#005F7F ;
	font-weight: bold;
	cursor: pointer;
		transition: all 0.1s ease-out;
}
.popbutton:hover .popbox {
	display: block;
}
.popbutton:hover {
    border-color: #9BD3D7;
	background-color:#C3E3F7;
	color:#5F7F9F ;
}
.popbutton:active {
}
.popbox {
	display: none;
	z-index: 1;
	position: absolute;
	left: 3em;
	top: 0.5em;
	width:25em; /* sets width of transparent container */
	height:22em; /* sets height of transparent container */
	overflow:visible; /* doesn't work for me */
	padding:0pt;
	margin: 0pt;
	border:none; /* SET SAY 1pt solid red TO SEE TRANSPARENT AREA */
	border-radius:12pt;
}
iframe.popmenu {
	width:100%;
	height:100%;
	overflow:visible; /* doesn't work for me */
	margin: 0pt;
	border:none;
	border-radius:12pt;
	padding:0pt; 10pt 14pt 2pt; /* surround drop shadow" */
}

HTML content

<div class="navbox-buttons"><!-- notional positioning container -->
  <div class="popbutton"><!-- pop-up menu button -->
      Hover to pop up >
  	<div class="popbox"><!-- oversize container for the iframe -->
	  <iframe class="popmenu" src="demo-menu.html" scrolling="no"></iframe><!-- submenu -->
	</div>
  </div>
</div>

Code for the pop-up page

CSS styling

/* WRAPPER */

body.popup {
	margin:0pt;
	padding:0pt 10pt 14pt 2pt; /* surround drop shadow */
	background-color: none;
}

/* VISIBLE CONTENT */

a {
text-decoration: none ;
}

a:link { 
color: #005F7F ;
}

a:active { 
color: #00EFEF ;
}

a:visited { 
color: #006F3F ;
}

div.popup {
	width:22em; /* also sets wordwrap for long titles */
	box-shadow: 4px 8px 6px 6px rgba(0,0,0,0.2);
	margin: 0pt;
	padding: 0pt;
	border: 1pt solid #BFCFDF;
	border-radius:12pt;
	background-color: #DFE7F7;
}

HTML content

<body class="popup">
  <div class="popup">

    <p style="margin:2em; text-align:center; font-weight:bold;">Your content here</p>

  </div>
</body>

Updated 19 Sept 2017