How to create Alert Message in CSS | Javascript Alert Message Alternative

×

Message from howblogstuffworks.blogspot.com

Smooth Alert Box,

If you like the tutorial share and support...

Thank You

In this trick I will show you how you can create an Pop Up Alert Message just like Javascript but using CSS. In this manner you can get smooth popups without worrying about Browser security Unlike Javascript Alert box.

Here is the Demo.

Here is the Code.

<!-- Copy at the starting your Post using HTML view -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
/* 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 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

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

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

.modal-header {
  padding: 2px 16px;
  background-color: #202124;
  color: white;
}

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

.modal-footer {
  padding: 2px 16px;
  background-color: #202124;
  color: white;
}
</style>
<!-- Copy at the starting your Post using HTML view -->


<!-- Alert Dialog Box Customize according to your needs -->
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h3>Message from howblogstuffworks.blogspot.com</h3>
    </div>
    <div class="modal-body">
      <h1>Copied,</h1>
      <p>Now you can paste the Code into your blog Post...</p>
    </div>
    <div class="modal-footer">
      <h3>Ctrl + V to Paste</h3>
    </div>
  </div>

</div>
<!-- Alert Dialog Box Customize according to your needs -->



<!-- The button will always come on top of the script or won't work -->
<button id="myBtn">CSS Alert</button>
<script>
// 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";
  }
}
</script>
<!-- The button will always come on top of the script or won't work -->

Copied

Views: