-- CSS, HTML

Modal yapmak için bootstrap her ne kadar kullanışlı olsada, bootsratp kullanmadığınız projerlerde kütüphaneyi projenize dahil etmeden direk css ile modal oluşrurabilirsiniz.

Ayrıca mevcut sayfanızda birden fazla modal oluşturmanızda oldukça basit..

CSS Kodları:

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.9);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > div {
width: 80%;
position: relative;
margin: 40px auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 50px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 50px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #205740; }

 

HTML içinde modalın açılacağı link kullanımı:

<a href=”#openModal1″> Modal AÇ (Buraya fotoğraf vb gibi tagler kullanabilirsiniz.) </a>

Açılan modal:

<div id=”openModal1″ class=”modalDialog”>
<div>
<a href=”#close” title=”Close” class=”close”>X</a>
<h2>Modal Başlığı</h2>
<p>Modal içerisini istediğiniz gibi HTML tagleri yazıp oluşturabilirsiniz.</p>
</div>
</div>

 

Örnek uygualamayı buraya tıklayarak görebilirsiniz.

 

Birden fazla modal kullanımı için ;

<a href=”#openModal1″> Modal AÇ (Buraya fotoğraf vb gibi tagler kullanabilirsiniz.) </a>

<a href=”#openModal2″> Modal AÇ (Buraya fotoğraf vb gibi tagler kullanabilirsiniz.) </a>

 

Çoklu modal içerikleri;

<div id=”openModal1″ class=”modalDialog”>
<div>
<a href=”#close” title=”Close” class=”close”>X</a>
<h2>Modal Başlığı</h2>
<p>Modal içerisini istediğiniz gibi HTML tagleri yazıp oluşturabilirsiniz.</p>
</div>
</div>

 

<div id=”openModal2″ class=”modalDialog”>
<div>
<a href=”#close” title=”Close” class=”close”>X</a>
<h2>Modal Başlığı</h2>
<p>Modal içerisini istediğiniz gibi HTML tagleri yazıp oluşturabilirsiniz.</p>
</div>
</div>

 

Div içerisindeki id=”openModal” kısmını değiştirdikçe daha çok modal oluşturabilirsiniz. Buradaki sayfada örnek uygulaması mevcuttur.

Merak ettiklerinizi yazabilirsiniz.

Görüşmek üzere…

İlgili Yazılar

Yorum Yaz

Yorum