hotmeteor/modal.html

## modal.html
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>firstswim</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="modal.css">

    </head>
    <body>

        <div class="container">

            <!-- Website content goes here -->

            <a class="modal-open" href="#">Open Test</a>

        </div>

        <div class="modal">
            <div class="modal__inner">

                <div class="modal__container">
                    <header>
                        <a class="modal-close" href="#">Close</a>
                    </header>
                    <section class="modal__content">

                        <!-- Modal content goes here -->

                    </section>
                </div>

            </div>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script scr="modal.js"></script>

    </body>
</html>

## modal.js
$(document).ready(function() {

	// Modals.
	$('.modal-open').click(function(e) {
		e.preventDefault();

		var content = '<p>Hello world!</p>';
		$('.modal__content').html(content);

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

	$('.modal-close').click(function(e) {
		e.preventDefault();

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

});

## modal.scss
// Require bourbon
// http://bourbon.io/

$modal-anim-duration: 400ms;
$modal-anim-delay: 100ms;
$modal-anim-timing: $ease-in-out-cubic;

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    top: 0;
}

.container {
    @include transition-property(transform);
    @include transition-duration($modal-anim-duration - $modal-anim-delay);
    @include transition-timing-function($modal-anim-timing);
}

.modal {
    height: 100%;
    width: 100%;
    overflow: hidden;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;

    .positionfixed & {
        position: fixed;
    }

    visibility: hidden;
    @include transition-property(visibility);
    @include transition-duration(0ms);
    @include transition-delay($modal-anim-duration + $modal-anim-delay);

    &__inner {
        background: #fff;
        height: 100%;
        width: 100%;

        overflow: auto;
        -webkit-overflow-scrolling: touch;

        position: absolute;
        top: 0;
        left: 0;

        @include transform(translateX(100%));
        @include transition-property(transform);
        @include transition-duration($modal-anim-duration);
        @include transition-delay(0ms);
        @include transition-timing-function($modal-anim-timing);
    }

    &__container {
        background: #fff;

        .modal-close {
            background: #ddd;
            border-radius: 3px;
            color: #999;
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            padding: .5em .75em;
            text-transform: uppercase;
        }

        header {
            border-bottom: 1px solid #ddd;
            margin: 0;
            padding: .5em 0;
            text-align: center;
        }

        section {
            padding: .75em 1em;
        }

        p {
            color: #222;
            font-size: 16px;
            line-height: 1.5;
        }

        cite {
            font-size: 14px;
            font-weight: 500;
            font-style: normal;
        }
    }
}

// html active class
.modal-active {
    position: absolute;
    overflow: hidden;

    .container {
        @include transform(translateX(-100%));
        @include transition-duration($modal-anim-duration + $modal-anim-delay);
        @include transition-delay($modal-anim-delay);
    }

    .modal {
        visibility: visible;
        @include transition-delay(0ms);

        &__inner {
            @include transform(translateX(0));
            @include transition-delay($modal-anim-delay);
        }
    }
}
	<!doctype html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>firstswim</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="modal.css">

	</head>
	<body>

	<div class="container">

	<!-- Website content goes here -->

	<a class="modal-open" href="#">Open Test</a>

	</div>

	<div class="modal">
	<div class="modal__inner">

	<div class="modal__container">
	<header>
	<a class="modal-close" href="#">Close</a>
	</header>
	<section class="modal__content">

	<!-- Modal content goes here -->

	</section>
	</div>

	</div>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script scr="modal.js"></script>

	</body>
	</html>
	$(document).ready(function() {

	// Modals.
	$('.modal-open').click(function(e) {
	e.preventDefault();

	var content = '<p>Hello world!</p>';
	$('.modal__content').html(content);

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

	$('.modal-close').click(function(e) {
	e.preventDefault();

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

	});
	// Require bourbon
	// http://bourbon.io/

	$modal-anim-duration: 400ms;
	$modal-anim-delay: 100ms;
	$modal-anim-timing: $ease-in-out-cubic;

	html,
	body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	}

	body {
	top: 0;
	}

	.container {
	@include transition-property(transform);
	@include transition-duration($modal-anim-duration - $modal-anim-delay);
	@include transition-timing-function($modal-anim-timing);
	}

	.modal {
	height: 100%;
	width: 100%;
	overflow: hidden;

	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;

	.positionfixed & {
	position: fixed;
	}

	visibility: hidden;
	@include transition-property(visibility);
	@include transition-duration(0ms);
	@include transition-delay($modal-anim-duration + $modal-anim-delay);

	&__inner {
	background: #fff;
	height: 100%;
	width: 100%;

	overflow: auto;
	-webkit-overflow-scrolling: touch;

	position: absolute;
	top: 0;
	left: 0;

	@include transform(translateX(100%));
	@include transition-property(transform);
	@include transition-duration($modal-anim-duration);
	@include transition-delay(0ms);
	@include transition-timing-function($modal-anim-timing);
	}

	&__container {
	background: #fff;

	.modal-close {
	background: #ddd;
	border-radius: 3px;
	color: #999;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: .5em .75em;
	text-transform: uppercase;
	}

	header {
	border-bottom: 1px solid #ddd;
	margin: 0;
	padding: .5em 0;
	text-align: center;
	}

	section {
	padding: .75em 1em;
	}

	p {
	color: #222;
	font-size: 16px;
	line-height: 1.5;
	}

	cite {
	font-size: 14px;
	font-weight: 500;
	font-style: normal;
	}
	}
	}

	// html active class
	.modal-active {
	position: absolute;
	overflow: hidden;

	.container {
	@include transform(translateX(-100%));
	@include transition-duration($modal-anim-duration + $modal-anim-delay);
	@include transition-delay($modal-anim-delay);
	}

	.modal {
	visibility: visible;
	@include transition-delay(0ms);

	&__inner {
	@include transform(translateX(0));
	@include transition-delay($modal-anim-delay);
	}
	}
	}