jQuery: How to open a new modal dialog or popup window

Question

There's a login button at the bottom of the homepage. I want to open a new frame that works like another web page when I click on the button! But the popup window should be opened inside the homepage and located in the center of the homepage! It should be smaller than the homepage.

All I've been looking for is how to open a new tab or a new window. I want to know how to open a popup window located in center of the homepage.

Your question is somehow vague. can you include some visual examples of your purpose? — Saeed Jamali, Jan 19 '20 at 08:50
Now that I know it's called Modal, I'll give it a try and ask for your help if it doesn't work out, thank you. — infiniteQuestions, Jan 19 '20 at 10:53

score 0 · Accepted Answer · answered Jan 19 '20 at 09:16

This is JavaScript solution from w3school.com

Try it :

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

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

// Get the <span> 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";
}

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

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  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 */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

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

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Place Your Content Here ..</p>
  </div>

</div>

score 0 · Answer 2 · answered Jan 19 '20 at 15:48

These two answers, using jQuery, will quickly explain how to create your own pop-up modal dialog box (also known as a lightbox).

jQuery Lightbox appearing blank

Prevent modal from scrolling

A modal is just a pop-up dialog box that: (a) pops-up overtop of other content, and (b) usually prevents you from interacting with the underlying page until it is closed.

and

A lightbox is just a regular DIV structure that has been styled position:absolute or position:fixed to remove it from the normal HTML flow. It is then hidden, and displayed when desired upon a button click or other detectable event (mouseover, ajax.done, etc).

Positioning the dialog and making it look great(er) is the job of CSS.

Note that you can also use a library/framework, like Bootstrap or jQueryUI (a separate, complementary library that works exactly like jQuery and provides many additional features), to provide pre-fab dialog boxes with skookum CSS that already have many working bits pre-done for you.

https://www.w3schools.com/bootstrap4/bootstrap_modal.asp

https://jqueryui.com/dialog/

It is most important, however, for you to understand what a modal dialog is before you choose to use a library. And, since it only takes 5 minutes to comprehend the first linked answer above, it is easily done.

jQuery: How to open a new modal dialog or popup window

2 Answers2