<!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
