<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();
		}
	});
});