CODEWITHSUNDEEP
javascriptpopup
BlueShark
BlueShark

Reputation: 148

What is the correct term for those different styled "pop up" boxes and how to implement them?

what are these boxes called? (the red error alert one in the image below? I thought they would be called a pop up box but when i went to http://www.w3schools.com/js/js_popup.asp and learnt how to to code these there is a slight difference. The difference is that the one on the website requires you to close it or accept it's error before continuing. Whereas the one they use in stack overflow and other websites alerts the user but allows you to carry on typing or performing an action rather than having to close it and then continuing. so can anyone tell me what they are properly referred to as because when i google JavaScript pop up boxes I only get returned stuff like the link above. AND can someone link me to a page where I can learn how to do it or start me off with some basic syntax an image of a red alert box

Upvotes: 0

Views: 208

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075317

They have a bunch of names:

  • popup
  • popover
  • tooltip
  • in-page notification
  • alert (not to be confused with the alert function)

Basically, they're just DOM elements with positioning information and a higher z-index than the elements underneath them. Here's an example:

document.querySelector("button").addEventListener("click", function() {
  document.querySelector("div").style.display = "block";
}, false);
document.querySelector("div").addEventListener("click", function() {
  this.style.display = "none";
}, false);
.popup {
  position: absolute;
  left: 30px;
  top: 30px;
  background-color: #ee0;
  border: 1px solid #aa0;
  padding: 2px;
}
<button type="button">Click me</button>
<div style="display: none" class="popup">I'm the popup</div>

Any of a very, very large number of libraries provide utilities for doing them. Two fairly popular ones are Bootstrap and jQuery UI, but there are lots of others.

Here's a Bootstrap example:

$('[data-toggle="popover"]').popover()
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

And a jQuery UI one:

$(document).tooltip();
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<p>Hover the field for the tooltip:</p>
<label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes.">

Upvotes: 1

Related Questions