Modal Animations

PHOTO

Thu Dec 24 2020 05:19:18 GMT+0000 (UTC)

$('.button').click(function(){

  var buttonId = $(this).attr('id');

  $('#modal-container').removeAttr('class').addClass(buttonId);

  $('body').addClass('modal-active');

})



$('#modal-container').click(function(){

  $(this).addClass('out');

  $('body').removeClass('modal-active');

});

COPY

https://codepen.io/designcouch/pen/obvKxm

Save snippets that work from anywhere online with our extensions

Comments

JS

@Tanvir

Modal Animations Modal Animations

#bootstrap #js #css #html

Bootstrap · The most popular HTML, CSS, and JS library in the world.

https://getbootstrap.com/

#bootstrap #js #html #webdev

Bootstrap · The most popular HTML, CSS, and JS library in the world.

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

#javascript #js #bookmarklet #css

Simple Dark Mode Toggle

javascript:(d=>{var css=`:root{background-color:#f1f1f1;filter:invert(1) hue-rotate(180deg)}img:not([src*=".svg"]),picture,video{filter: invert(1) hue-rotate(180deg)}`,style,id="dark-mode",ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else {style = d.createElement('style');style.type="text/css";style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)

#js #vanilla

vanilla js check if element exists

var element = document.querySelectorAll('.elementClass');
if (typeof(element) != 'undefined' && element != null) {
    //your code here
}

#js #modal #animation

Modal Animations

$('.button').click(function(){

  var buttonId = $(this).attr('id');

  $('#modal-container').removeAttr('class').addClass(buttonId);

  $('body').addClass('modal-active');

})



$('#modal-container').click(function(){

  $(this).addClass('out');

  $('body').removeClass('modal-active');

});

#js

Modal Animations

$('.button').click(function(){

  var buttonId = $(this).attr('id');

  $('#modal-container').removeAttr('class').addClass(buttonId);

  $('body').addClass('modal-active');

})



$('#modal-container').click(function(){

  $(this).addClass('out');

  $('body').removeClass('modal-active');

});

Modal Animations

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

Modal Animations

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

Embed code snippet