jQuery toggleClass example

Toggle class name on click in jQuery

by Sergey khorev

HTML

<link rel="stylesheet" href="https://skb44.ru/local/templates/skb44/styles_default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- mondal project -->
<a href="#" id="mk1" style="display:block" class="btn-mondal open-modal" data-modal="#modal1">Open Modal</a>
<div class="overlay">
  <div class="modal" id="modal1">
    <div class="content">
      <script>
        ! function(a, m, o, c, r, m) {
          a[o + c] = a[o + c] || {
            setMeta: function(p) {
              this.params = (this.params || []).concat([p])
            }
          }, a[o + r] = a[o + r] || function(f) {
            a[o + r].f = (a[o + r].f || []).concat([f])
          }, a[o + r]({
            id: "751666",
            hash: "04f8a0311d7c74a65cfbcce5c77b7229",
            locale: "ru"
          })
        }(window, 0, "amo_forms_", "params", "load");

      </script>
      <script id="amoforms_script_751666" async="async" charset="utf-8" src="https://forms.amocrm.ru/forms/assets/js/amoforms.js?1615967113"></script>
    </div>
  </div>
</div>

<style>
  .btn-mondal {
    padding: 3px 10px;
    display: inline-block;
    background: #EF233C;
    color: white;
    text-decoration: none;
    transition: 0.35s ease-in-out;
    font-weight: 700;
  }
  .btn:hover {
    background: #dc1029;
  }
  .overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: a;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: 0.35s 150px ease-in-out;
    opacity: 0;
    border: none;
    position: fixed;
    z-index: 800;
    bottom: 20px;
    right: 0px;
  }

  .overlay.open {
    opacity: 1;
    pointer-events: inherit;
  }

  .overlay .modal {
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.35s ease-in-out;
    max-height: 100vh;
    width: 765px;
    overflow-y: auto;
  }

  .overlay .modal.open {
    opacity: 1;
   ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}