Etiket: Modal

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

Transparan Açılır Kapanır Sabitlenmiş İletişim Formu

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <style type="text/css">
 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

.feed {
-webkit-transition: 0.3s;
transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
 position:absolute;
 margin:-150px 320px;
 padding:2px 4px;
 border: 1px solid rgba(0,0,0,.2);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 background-color: #0082ff; 
 overflow: hidden; 
 z-index:9999;
 color:white;
 cursor:pointer;
}
#developer {
-webkit-transition: 0.3s;
transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
 position:fixed;
 top:100px;
 left:-340px;
 width: 320px;
 height: 333px;
 padding:20px;
 border: 1px solid rgba(0,0,0,.2);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 background: rgba(0, 0, 0, 0.5); 
 -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
 -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
 box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
 overflow: hidden; 
 z-index:9998;
 padding-top:10px;
}

#developer textarea{
 background: rgba(255, 255, 255, 0.4); 
 width: 296px;
 height: 90px;
 border: 1px solid rgba(255,255,255,.6);
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box; 
 display:block;
 font-family: 'Source Sans Pro', sans-serif;
 font-size:18px;
 color:#fff;
 padding-left:20px;
 padding-right:0px;
 padding-top:12px;
 margin-bottom:10px;
 overflow:hidden;
}

#developer input {
 width: 296px;
 height: 48px;
 border: 1px solid rgba(255,255,255,.4);
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box; 
 display:block;
 font-family: 'Source Sans Pro', sans-serif;
 font-size:18px;
 color:#fff;
 padding:auto 10px;
 margin-bottom:10px;
}

#developer input[type=submit] {
 cursor:pointer;
}

#developer input.name {
 background: rgba(255, 255, 255, 0.4); 
 padding-left:20px;
}

#developer input.email {
 background: rgba(255, 255, 255, 0.4);
 padding-left:20px;
}

#developer input.message {
 background: rgba(255, 255, 255, 0.4) ;
 padding-left:20px;
}

::-webkit-input-placeholder {
 color: #fff;
}

:-moz-placeholder{ 
 color: #fff; 
}

::-moz-placeholder {
 color: #fff;
}

:-ms-input-placeholder { 
 color: #fff; 
}

#developer input:focus, #developer textarea:focus { 
 background-color: rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
 -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
 box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
 overflow: hidden; 
}

.btn {
 width: 138px;
 height: 44px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 display:block;
 border: 1px solid #253737;
 background: #416b68;
 background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
 background: -webkit-linear-gradient(top, #6da5a3, #416b68);
 background: -moz-linear-gradient(top, #6da5a3, #416b68);
 background: -ms-linear-gradient(top, #6da5a3, #416b68);
 background: -o-linear-gradient(top, #6da5a3, #416b68);
 background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
 padding: 10.5px 21px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
 -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 text-shadow: #333333 0 1px 0;
 color: #e1e1e1;
}

.btn:hover {
 border: 1px solid #253737;
 text-shadow: #333333 0 1px 0;
 background: #416b68;
 background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
 background: -webkit-linear-gradient(top, #77b2b0, #416b68);
 background: -moz-linear-gradient(top, #77b2b0, #416b68);
 background: -ms-linear-gradient(top, #77b2b0, #416b68);
 background: -o-linear-gradient(top, #77b2b0, #416b68);
 background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
 color: #fff;
 }
.btn:active {
 margin-top:1px;
 text-shadow: #333333 0 -1px 0;
 border: 1px solid #253737;
 background: #6da5a3;
 background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
 background: -webkit-linear-gradient(top, #416b68, #609391);
 background: -moz-linear-gradient(top, #416b68, #6da5a3);
 background: -ms-linear-gradient(top, #416b68, #6da5a3);
 background: -o-linear-gradient(top, #416b68, #6da5a3);
 background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
 color: #fff;
 -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 }
 </style>
 <form id="developer">
 <input name="name" placeholder="Adınız?" class="name" required />
 <input name="emailaddress" placeholder="E-Mail Adresiniz?" class="email" type="email" required />
 <input name="url" placeholder="url" class="email" type="url" disabled value="<?php echo "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>"/>
<textarea rows="4" cols="50" name="subject" placeholder="Hata Raporu" class="message" required></textarea>
 <input name="submit" class="btn" type="submit" value="Bildir" />
 <div class="feed">+</div>
 </form>
 <script type="text/javascript">
 var deger=1;
$(".feed").click(function() {

 if(deger == 1){
 $("#developer").css("left", "+=340");
 deger=0;
 }else{
 $("#developer").css("left", "-=340");
 deger=1;
 }
});
 </script>