CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ONE_FE
ONE_FE

Reputation: 996

Adding custom animations for dialog box when popup

I want to add effects to my dialog box as in this link.

I tried several examples in other sites and SO as well, but no joy. My dialog box takes the whole browser width and height.

Here's the button i'm clicking to open the dialog box, modal HTML Code, some of the CSS styles related to Dialog Box and JS Code to open the dialog Box:

 // 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 on 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";
 }
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0px;
  top: 0px;
  width: 100%;
  /* Full width */
  height: 620px;
  /* 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 */
  overflow-y: hidden;
}
/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  /*margin: 15% auto;  15% from the top and centered */
  padding: 20px 40px 20px 40px;
  border: 1px solid #888;
  /*width: 80%;  Could be more or less, depending on screen size */
}
<div class="site-body">
  <h1>Click the Button to Open Modal</h1>
  <button id="myBtn" class="modal-btn">Open Modal</button>
</div>

<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">x</span>
    <image class="logo" src="images/logo.png" />
    <div class="header">
      <div class="reference">
        <div class="row font-size1">
          <div class="label"><strong>OR Ref:</strong>
          </div>
          <div class="value"><strong>1-2-123456789</strong>
          </div>
        </div>
        <div class="row font-size1">
          <div class="label"><strong>CP Ref:</strong>
          </div>
          <div class="value"><strong>hID-prod123456</strong>
          </div>
        </div>
      </div>
      <div class="search">
        <div class="row right-align">
          <div class="left-align label show-right-margin"><strong>Note Type: </strong>
          </div>
          <select class="left-align">
            <option>All Notes</option>
            <option>Any</option>
          </select>
          <button class="search-btn left-align">Search</button>
        </div>
      </div>
    </div>
    <div class="error">Sorry, We couldn't fetch all of the notes you asked for. Please try again or report an error if it continues to happen
    </div>
  </div>

How to add animations to dialog box when poping up as in this link?

Upvotes: 0

Views: 988

Answers (1)

Shnibble
Shnibble

Reputation: 110

JQuery has a fairly strait forward method for showing/hiding elements with an animation. It isn't exactly what is in the example but fairly close and, again, very simple.

// When the user clicks on the button, open the modal 
btn.onclick = function() {
  $('.modal').show('fast');
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  $('.modal').hide('fast');
}

You could also experiment with JQuery slideDown() and slideUp() functions (just replace show() and hide() with these two respectively).

Upvotes: 1

Related Questions