Javascript/jquery popup with gray background

maredzki
maredzki used Ask the Experts™
on
I am trying to have a popup with a a nice alert message on my webpage, graying out the background and "OK" button has to be clicked. The page cannot be used until OK, or whatever button is clicked.

Does anyone have a working script for this? I'm assuming it is both CSS and js/jquery.

Thanks much and appreciate it!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
using bootstrap (click on the demo) : https://getbootstrap.com/docs/4.0/components/modal/#live-demo
jQuery ui : https://jqueryui.com/dialog/

or just google for : css modal jquery
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You are describing a modal.

The key is you have some html on your page that is hidden when the page loads. At a predetermined action, the html is active while the rest is "grayed out".  

A pure js modal example https://robinparisi.github.io/tingle/

I use bootstrap for most everything and there is a modal built in https://getbootstrap.com/docs/4.3/components/modal/
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You can have a look at this EE article https://www.experts-exchange.com/articles/28838/Create-a-responsive-confirmation-popup-using-HTML-CSS-jQuery-and-Promises.html

Otherwise this is a fairly simple version

CSS
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.75);
  z-index: 100000;
}
.popup {
   width: 50%;
   position: relative;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   background: white;
   color: #333;
   border: 2px solid #333;
   padding: 15px;
}
.popup .close-popup {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

Open in new window

JavaScript
<script>
function popup(msg) {
  // Only 1 popup at a time
  closeOverlay();
  
  // Create the overlay
    var overlay = document.createElement('div');
    overlay.classList.add('overlay');
  
  // Create the popup
    var popup = document.createElement('div');
    popup.classList.add('popup');
  
  // Add the content
    var content = document.createElement('p');
  content.innerHTML = msg;
  
  // create the close button
  var close = document.createElement('button');
  close.innerHTML = 'Close';
  close.classList.add('close-popup');
  
  // Put it all together
  popup.appendChild(close);
    popup.appendChild(content);
    overlay.appendChild(popup);
    document.body.append(overlay);
}
// Close popup and overlay
function closeOverlay() {
  var overlay = document.getElementsByClassName('overlay');
  if (overlay[0]) {
    overlay[0].remove();
  }
}
// Listen for an Esc to close overlay
window.addEventListener('keyup', function(e) {
  if (e.which === 27) closeOverlay();
});
// Listen for mouse click on overlay or Close button to close overlay
window.addEventListener('click', function(e) {
  if (e.target.classList.contains('overlay') || e.target.classList.contains('close-popup')) {
    closeOverlay();
  }
});
</script>

Open in new window

Working sample here

The above sample uses plain JavaScript (no jQuery) and plain styles (no Bootstrap or other libraries - although the container for the example uses bootstrap the actual popup and the button that launches it don't have any reliance on any other library or styles.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
These are all good examples of how I want it to look, especially https://robinparisi.github.io/tingle/, but they are all triggered by mouse click. How do I load it on page load?
leakim971Multitechnician
Top Expert 2014

Commented:
most of them have the option to popup on demand
if not, it's easy to trigger a mouse click :

jQuery("#buttonID").trigger("click"); // same as $("#buttonID").click(); 

Open in new window

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
or initiate onlload or just not hiding it via css to start with.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
In my sample just add this to your page
<div class="overlay">
  <div class="popup">
      <p> Your content here</p>
      <button class="close-popup">Close</button>
  </div>
</div>

Open in new window

Add the CSS
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.75);
  z-index: 100000;
}
.popup {
   width: 50%;
   position: relative;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   background: white;
   color: #333;
   border: 2px solid #333;
   padding: 15px;
}
.popup .close-popup {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

Open in new window

And the JS (to close it)
It will open by default.
Working sample here
Hi maredzki,
if you see the examples you shared through link: https://robinparisi.github.io/tingle/
all are triggered on button click.

On the same page, if you see 'Use' section,
Declare 'modal' on your web page. Before that don't forget to add reference to "tingle.min.css" and "tingle.min.js" files.

If you are using jQuery, then include jQuery.js file also.
Now you can add below code:

(function () {
            modal.open();
})();

Let us know if this solves your problem.

Author

Commented:
Ok, what am I doing wrong, just trying to get the button working, I'll try to get the jQuery to open on load.

Link to example which is not working.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Did you get that working?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial