Draggable Translucent Modal

draggable-translucent-modal.markdown

Draggable Translucent Modal

Building off of a translucency exercise that I completed a few days ago. This one is even more fun!

A Pen by Jesse Couch on CodePen.

License.

index.html

<button id="modal-trigger" data-buttonTitle="Open Modal">Open Modal</button>
<div id="modal">
  <div id="content">I'm a modal. Drag me around.</div>
  <div id="background"></div>
</div>

script.js

// draggable plugin

(function($) {
    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);

$('#modal').drags();

$('#modal-trigger').click(function(){
  $(this).addClass('hide');
  $('#modal').addClass('show');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

*, *:before, *:after {
  box-sizing:border-box;
}

body,html {
  height:100%;
  max-height:100%;
  font-family:helvetica neue, helvetica, arial, sans-serif;
  font-size:20px;
  font-weight:200;
  line-height:20px;
}

body {
  background-image:url(https://unsplash.imgix.net/45/tkLOe7nnQ7mnMsiuijBy_hm.jpg?q=75&fm=jpg&auto=format&s=f370fb6d5c06573c5aa7d1f1ae41f1df);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  position:relative;
  overflow:auto;
  #modal-trigger {
    display:block;
    position:relative;
    top:100px;
    margin:0 auto;
    padding:0 60px;
    border-radius:50px;
    border:none;
    background:inherit;
    overflow:hidden;
    font-size:20px;
    font-family:helvetica neue, helvetica, arial, sans-serif;
    font-weight:200;
    line-height:100px;
    box-shadow:0 0 50px 5px rgba(0,0,0,.2);
    opacity:1;
    &.hide {
      opacity:0;
    }
    &:before {
      content:'';
      display:block;
      position:absolute;
      z-index:1;
      top:-50px;
      left:-50px;
      height:calc(100% + 100px);
      width:calc(100% + 100px);
      background:inherit;
      -webkit-filter:blur(10px) saturate(1.5);
    }
    &:after {
      content:attr(data-buttonTitle);
      display:block;
      position:absolute;
      top:0;
      left:0;
      z-index:2;
      height:100%;
      width:100%;
      background:rgba(255,255,255,.3);
    }
  }
  #modal {
    position:absolute;
    opacity:0;
    top:50%;
    left:50%;
    height:300px;
    width:500px;
    margin:-150px 0 0 -250px;
    transition:none;
    background:inherit;
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 0 50px 5px rgba(0,0,0,.2);
    &.show {
      opacity:1;
    }
    #content {
      position:absolute;
      top:0;
      left:0;
      z-index:1;
      height:100%;
      width:100%;
      background:rgba(255,255,255,.4);
      line-height:300px;
      text-align:center;
    }
    #background {
      background:inherit;
      position:absolute;
      top:-50px;
      left:-50px;
      height:calc(100% + 100px);
      width:calc(100% + 100px);
      -webkit-filter:blur(10px);
    }
  }
}