How To Create A Modal Popup - Day 24

Today will be less writing and more code. Below is a simple example of a modal window using jQuery. It is super flexible and can easily be modified to accommodate an email capture, image, video or really anything you’d like.

index.html

<button id="open-modal">Open Modal</button>

<div id="modal" class="modal flex center hidden">
 <div class="modal-content">
  <h3>Put modal stuff here</h3>
  <button id="close-modal">Close</button>
 </div>
</div>

style.css

.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  top: 0; /* Position item for fixed property */
  left: 0; /* Position item for fixed property */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: #000; /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  padding: 50px;
}
.hidden {
  display: none !important;
}

scripts.js

$('#open-modal').click(function(){
 $('#modal').removeClass("hidden");
});

$('#close-modal').click(function(){
 $('#modal').addClass("hidden");
});

Conclusion

Check out the video below for a more in-depth overview for the Zero to Startup in 30 Days Challenge.

How To Create A Modal Popup

Coming Tomorrow -----> How To Setup Gmail Business Email

Want To Learn How To Turn Your Ideas Into Code?


Written by Tim Moreton who lives and works
in Philadelphia building useful things.