CSS, jQuery

CSS ve jQuery ile modal box nasıl yapılır ?

Bu makalede CSS ile modal box yapımını ele alacağız. Modal box yapımında CSS‘in transform, fixed, opacity gibi özelliklerinden faydalanacağız.

Modal boxlar kullanıcılara bildirim mesajları vermek için kullanılan bir yöntemdir. Sayfa yenilenmeden hoş bir animasyon yada efekt ile açılıp, kullanıcı kolaylığı açısından günümüz web dünyasında önemli bir yere sahiptir. Bir örnek ile açıklayacak olursak;

HTML yapımız şu şekilde olsun;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS ve jquery ile modal box yapımı </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class = "modal_box">
  <div class="modal_content">
    <div class="modal_header">
      Bildirim Mesajı
    </div>
    <div class="modal_body">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate maxime dicta optio amet provident. Necessitatibus recusandae, quia blanditiis veniam expedita. Ab velit saepe illum voluptatibus nulla similique dolores libero at.</div>
      <div>Similique debitis sapiente suscipit voluptates ut sit, ex, dolorem impedit fugit sint reiciendis dicta velit quam, ducimus modi dolores quod dolor a assumenda? Minima aperiam quae laborum, dolorem velit aliquam.</div>
    </div>
    <div class="modal_footer">
      <a href = "javascript:void(0);" class = "close" href="">Kapat</a>
    </div>
  </div>
</div>
<div class = "header">
  <a href="http://www.sinanoztop.com/category/css/"><em class = "fa fa-angle-left"></em>Diğer örnekleri inceleyebilmek için tıklayınız.</a>
</div>
<div class="content">
  <div class="box_wrapper">
    <a href="" class="modal_open">Test etmek için tıkla :)</a>
  </div>
</div>
</body>
</html>

CSS yapımız ise;

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
html {
  height:100%;
}

body {
  height:100%;
}
* {margin:0;padding:0;list-style:none;box-sizing:border-box;font-family: 'Roboto', sans-serif;}
a {text-decoration: none;}

.content {
  width:1170px;
  height:100%;
  margin:0px auto;
  font-size:15px;
  color:#565656;
  line-height:22px;
}

.header {
  background:#444444;
  padding:25px 0;
}

.header a {
  display: inline-block;
  padding-left:25px;
  color:#ffffff;
}

.header a em {
  margin-right:12px;
}

.box_wrapper {
  margin-top:100px;
  padding:25px 0;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  text-align: center;
}

.box_wrapper:after {
  content:'';
  display: block;
  clear: both;
}

.modal_box {
  position: fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity: 0;
  visibility: hidden;
}

.modal_box:after {
  content:'';
  display:block;
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  background:rgba(0,0,0,0.5);
}

.modal_content {
  max-width:600px;
  margin: 0px auto;
  background:#ffffff;
  margin-top: 50px;
  border:1px solid #dddddd;
  box-shadow:0 0 5px #dddddd;
  border-radius:4px;
  position: relative;
  z-index:1;
  transition:all 0.4s linear;
  -webkit-transition:all 0.4s linear;
  transform:translateY(-100%);
  -webkit-transform:translateY(-100%);
  opacity: 0;
  
}

.modal_header,.modal_footer,.modal_body {
  padding:15px;
  color:#565656;
}

.modal_header {
  border-bottom: 1px solid #dddddd;
}

.modal_footer {
  text-align: right;
  border-top:1px solid #dddddd;
}

.modal_footer a {
  display: inline-block;
  padding:10px 20px;
  background: skyblue;
  color:#ffffff;
  font-size:14px;
  border-radius: 5px;
}

.modal_body {
  font-size:14px;
  line-height: 22px;
}

.modal_box.active .modal_content {
  opacity: 1;
  transform:none;
  -webkit-transform:none;
}

.modal_box.active {
  opacity: 1;
  visibility: visible;
}

.modal_open {
  display: inline-block;
  background:#333333;
  padding:20px;
  color:#ffffff;
  font-size:17px;
  border-radius:4px;
}

jQuery kodlarımız;

$(function(){
    $(".modal_open").on("click",function(){
      $(".modal_box").addClass('active');
      return false;
    });
    $(".close").on("click",function(){
      $(".modal_box").removeClass('active');
      return false;
    });
  });

Örneğin canlı hali için buraya tıklayınız.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir