Merhaba arkadaşlar. Anlık bu derste baya bir hata yaptım, kimi istemeden olan kimini de bilerek yaptım ve olabildiğince oluşabilecek hataları göstermeye çalıştım. Anlaşılmayan bir yer olursa yorum yazın çekinmeyin elimden geldikçe sorularınızı cevaplamaya çalışırım. İyi seyirler iyi forumlar
Unutmadan butonların css kodlarını derste vermemiştim, öyle hatırlıyorum. Eğer vermemişsem aşağıda verdiğim kodları kullanabilirsiniz. Yada kendiniz de yazabilirsiniz.
HTML:
CSS:
Unutmadan butonların css kodlarını derste vermemiştim, öyle hatırlıyorum. Eğer vermemişsem aşağıda verdiğim kodları kullanabilirsiniz. Yada kendiniz de yazabilirsiniz.
HTML:
Kod:
<div class="ModalBox">
<div class="title">Takahara Shujin Bildirim</div>
<div class="content">İçerik Kısmı</div>
<div class="footer">
<button class="close" >Kapat</button>
<button class="open" >Mesajı Aç</button>
</div>
</div>
<div class="overlay"></div>
Kod:
.overlay {
width: 100%;
background-color: rgba(0,0,0,0.6);
position: fixed;
height: 100%;
z-index: 99;
left: 0;
top:0;
}
.ModalBox {
width: 500px;
position: absolute;
z-index: 100;
left: calc((100% - 500px) / 2);
top: 150px;
text-align: left;
font-family: Verdana;
font-size: 13px;
}
.ModalBox .title {
background-color: #eee;
border-radius: 3px 3px 0 0;
padding: 10px 15px;
border-bottom: 1px solid #bbb;
text-align: center;
font-weight: bold;
}
.ModalBox .content {
background-color: #bbb;
padding: 5px 10px 0;
}
.ModalBox .footer {
background-color: #eee;
border-radius: 0 0 3px 3px;
padding: 10px 15px;
border-top: 1px solid #bbb;
text-align: right;
}
.ModalBox .footer button {
border: 0;
background-color: #55728b;
border-radius: 3px;
padding: 3px 10px;
color: #eee;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
}