There must be thousands of examples of modal popups used on websites these dayssee https://www.webfx.com/blog/web-design/examples-of-modal-windows/ or https://bashooka.com/inspiration/modal-window-ui-designs/—often saturated with all kinds of features—demonstrating the inventiveness of their designers.  In addition to the many different kinds of popupse.g. ones that open and close after a set amount of time, ones that open when you click a button or hover over an element, those that close when you click a gadget or press a key on a keyboard, ones that fly-in from the top/bottom or side, ones that fade in/out, ones that are located at the top/bottom or centred on the screen, etc. there are hundreds of techniques that people can use to generate them.

When it comes time to reach into your “toolkit” and create a simple modal popup for your website (perhaps you will use the feature once or maybe you will use it in several places), we all know that you can waste hours of trial-and-error creating the most basic modal popup.  No-one is looking for perfection and, unless your business is to showcase your talent for design, you probably only need the most basic no-frills kind.  If you want something elaborate then this article may not be for you although you may get some ideas to take the basic design further.

This article will show you how to create the simple,  “no frills” modal popup demonstrated in A simple pop-up modal on this site.  Most of the CSS already exists in the Cassiopeia template; it just needs a few tweaks.

A few CSS changes

Most of the CSS is already built into Cassiopeia with a few changes I’ve made (that can be added to the site custom CSS file if you want).  Here are the extra bits:

/* The Modal (minor tweaks)             Most of the CSS exists in Cassiopeia template */

.modal {
  top: 50%;                             /* Centre vertically on screen */
  left: 50%;                            /* Centre horizontally on screen */
  width: auto;
  height: auto;
  overflow: auto;                       /* Enable scroll if needed */
  transform: translate(-50%, -50%);     /* Position the modal in centre of screen */
}

.modal-header {
  border: none;
  display: inline;
}

.modal-body {
  padding: 2px 16px;
}

/* The Close Button (minor tweaks) */

.close {
  float: inline-end;
  margin: 10px -23px 0;
  padding: 3px 4.2px;
  line-height: 0.8em;
  transform: translate(-50%, -50%);
}

.close:hover, .close:focus {
  text-decoration: none;
  cursor: pointer;
  background-color: #dfdfdf;
  border-radius: 10px;
}

The Javascript

In order to activate the modal by clicking something on the screen, we need to add some Javascript.  The Javascript can be added by enclosing the following text within a script blockIf you prefer, you can store the script in a file somewhere and call it when you need it:

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

// Get the button that opens the modal
var btn = document.getElementById("demoBtn");

// Get the <p> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

window.addEventListener('keydown', function (event) {
  if (event.key === 'Escape') {
    modal.style.display = 'none'
  }
})

The modal contents

The last part is what goes into the contents of the modal itself.  You can use the following snippet as an example

<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header"><span class="close" title="close">×</span></div>
<div class="modal-body">
<p">This is where you enter the text contents for the modal</p>
</div>
</div>
</div>

Putting it all together

All that you need to do now is create an element with the id="demoBtn". The following HTML code is one way to achieve it:

<p><button id="demoBtn">Demonstration</button></p>

You can use these techniques in Joomla articles of Custom HTML modules. Enjoy.

No comments

Comments are closed

The comments for this content have been closed automatically; it's been a while since it was published.