<div id="wrap">

  <!-- section -->
  <div class="section">
    <div class="center">

      <div id="buttons">
        <div class="button button--1">
          <div class="button__content"><span>Inside (absolute)</span></div>

          <div class="modal modal--inside">
            <span>Modal window</span>
          </div>

        </div>

        <div class="button button--2">
          <div class="button__content"><span>Outside (fixed by script)</span></div>
        </div>

        <div class="modal modal--outside">
          <span>Modal window</span>
        </div>
      </div>

    </div>
  </div>
  <!--/section -->

</div>

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fff;
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
}

.section {
  padding: 40px;
}

.center {
  width: 100%;
  max-width: 980px;
  margin: auto;
}

#buttons {
  display: flex;
  justify-content: flex-end;
  margin: -20px;
}

.button {
  position: relative;
  margin: 20px;
  user-select: none;
  
  &__content {
    background: #27C4A2;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    padding: 20px 30px;
    cursor: pointer;
    text-align: center;
  }
}

.modal {
  min-width: 400px;
  margin-top: 5px;
  padding: 40px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #ddd, 0 5px 20px fade(#000, 10%);
  display: none;
  
  &--inside {
    position: absolute;
    z-index: 1;
    top: 100%;
    right: 0;
  }
  
  &--outside {
    position: fixed;
    z-index: 999;
  }
  
  &--show {
    display: block;
  }
}

function fixModalOutside() {
  var $button = $('.button--2'),
    topPos = $button.offset().top + $button.height() - $(window).scrollTop(),
    ritPos = $(window).width() - ($button.offset().left + $button.width() - $(window).scrollLeft());
  
  $('.modal--outside').css({
    top: topPos,
    right: ritPos
  });
}

$(window).on('load resize scroll', function() {
  fixModalOutside();
});

$(function() {  
  $('.button').click(function() {
    var $button = $(this);
    
    if($button.hasClass('button--1')) {
      $('.modal--inside').toggleClass('modal--show');
    } else {
      $('.modal--outside').toggleClass('modal--show');
      fixModalOutside();
    }
  });
});