magnific-popup/website/_includes/signup.html

Lightbox and modal dialog plugin. Can display inline HTML, iframes (YouTube video, Vimeo, Google Maps), or an image gallery. Animation effects are added with CSS3 transitions. For jQuery or Zepto.

<div id="mc_embed_signup" class="embed-form zoom-anim-dialog mfp-hide">
	<style>
	#mc_embed_signup h4 {
		font-size: 30px;
		line-height: 1.2;
		margin-bottom: 12px;
	}
	#mc_embed_signup input[type="email"] {
		border: 1px solid #CCC;
		border-top: 1px solid #999;
		padding: 5px;
		font-size: 18px;
		width: 200px;
		margin-right: 10px;
		height: 25px;
		transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
	}
	#mc_embed_signup input[type="email"]:focus {
		background-color: #FFF;
		border: 1px solid #3169B3;
		box-shadow: #3169B3 0px 0px 5px;
		-moz-box-shadow: #3169B3 0px 0px 5px;
		-webkit-box-shadow: #3169B3 0px 0px 5px;
		outline: none;
	}
	#mc_embed_signup input[type="submit"] {
		border: 1px solid #3169B3;
		font-size: 13px;
		font-weight: bold;
		color: #FFF;
		height: auto;
		padding: 8px 13px;
		cursor: pointer;
		background-color: #3169B3;
		display: inline-block;
		width: auto;
		-webkit-appearance: none;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		vertical-align: top;
	}
	.embed-form {
		padding: 30px;
		background: #FFF;
		margin: 30px auto;
		display: block;
		width: auto;
		max-width: 350px;
		position: relative;
	}
	#mc_embed_signup .mc-field-group {
		margin-top: 20px;
	}
	#mc_embed_signup p {
		font-size: 15px;
		color: #4F4F4F;
	}
	</style>
	<script>
	if(window.$) {
		$(document).ready(function() {
	        $('.wp-version-link').magnificPopup({
	          type: 'inline',

	          fixedContentPos: false,
	          fixedBgPos: true,

	          overflowY: 'auto',

	          closeBtnInside: true,
	          preloader: false,
	          
	          removalDelay: 300,
	          mainClass: 'my-mfp-zoom-in'
	        });
	    });
	}
    </script>
	<form action="http://dimsemenov.us1.list-manage.com/subscribe/post?u=ef6026d946a7b5d41d92c02e4&amp;id=54fae727da" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
		<h4>Magnific WordPress Plugin is under development!</h4>
		<p>To get notified about the release, subscribe to my Mailchimp list that I send 3-4 times a year. Any feature requests are welcome.</p>
		<div class="mc-field-group">
			<input type="email" value="" name="EMAIL" placeholder="Your email" class="required email" id="mce-EMAIL">
			<input type="hidden" id="group_2" name="group[2065][2]" value="true">
			<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
		</div>
		
		<div id="mce-responses" class="clear">
			<div class="response" id="mce-error-response" style="display:none"></div>
			<div class="response" id="mce-success-response" style="display:none"></div>
		</div>	
	</form>
</div>