Bootstrap ve PureCss ile ModalBox

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://purecss.io/css/main-grid-old-ie.css">
    <link rel="stylesheet" href="http://purecss.io/css/bootstrap/modal.css">
    <link rel="stylesheet" href="http://purecss.io/css/rainbow/baby-blue.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://purecss.io/css/main-grid.css">
<link rel="stylesheet" href="http://purecss.io/css/main.css">
<link rel="stylesheet" href="http://purecss.io/css/bootstrap/modal.css">
<link rel="stylesheet" href="http://purecss.io/css/rainbow/baby-blue.css">
<!--<![endif]-->
<!--[if lt IE 9]>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
	<div class="content">
		<p>
			<a href="#myModal" role="button" class="pure-button-primary pure-button" data-toggle="modal">
			Aç </a>
		</p>
		<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
			<div class="modal-header">
				<h3 id="myModalLabel">Başlık</h3>
			</div>
			<div class="modal-body">
				<form class="pure-form pure-form-stacked">
					<label for="email">Email</label>
					<input id="email" type="text" placeholder="Email">
					<label for="state">Cinsiyet</label>
					<select id="state">
						<option>E</option>
						<option>F</option>
					</select>
					<label class="pure-checkbox">
					<input type="checkbox"> Hatırla </label>
				</form>
			</div>
			<div class="modal-footer">
				<button class="pure-button" data-dismiss="modal" aria-hidden="true">Kapat</button>
				<button class="pure-button pure-button-primary">Gönder</button>
			</div>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	</div>
</div>
</body>
</html>

Demo için tıklayınız

Sizin Değerli Görüşlerinize İhtiyacımız Var.