CSS Website Açılışında Responsive Modal Box (İletişim Kutusu)

CSS kalıcı pencere veya iletişim kutusu hızlı mesajı veya bilgileri göstermek için mükemmel bir yoldur, Kalıcı açılır pencereler web'de oldukça sık kullanılır. Bunların bazı popüler kullanımları arasında bültene kayıt olma, bildirimler, uyarıları gösterme ve kayıt ve giriş formlarını kullanma sayılabilir.

Bizim modal uygulamız esnek olacak, bu da istediğiniz amaç için kullanmakta özgür olacağınız anlamına geliyor.

Kalıcı pencere , kullanıcı pencereyi kapatana kadar ana sitenin çalışmasını tamamen engeller. Anladığınız gibi, böyle bir eylemi uygulamak için, kalıcı bir pencerenin içeriği kullanıcı için yararlı olmalıdır.

Otomatik açılan pencereyi terk etmek ve kullanıcıya sadece pencereyi kapatan ve pencerede net bir şekilde görülebilen bir eleman (genellikle bir çarpı işareti) sağlaması arzu edilir . Bu yöntemi, biz bugün ve bu makalede uygulamaktayız.

ÖRNEK:

önizleme buton

Sliderı HTML sayfamıza eklemek için <head></head> etiketleri arasına js ve css dosyalarını yükleyi.


<head>
<link rel="stylesheet" href="modal.css">
 
<script src="modal.js" type="text/javascript"></script> 
</head>   

Web sayfasının Kapanış etiketinin hemen üstüne aşağıdaki kod dizisi ekleyin.


<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
       <img src="k.jpeg" alt="kuş resmi">
      <p>Lorem Ipsum, dizgi ve baskı endüstrisinde..</p>
      <p>Lorem Ipsum, dizgi ve baskı endüstrisinde..</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

Div etiketinin Class'ı class="modal-body" bölüme istediğiniz içeriği ekleyebilirsiniz. Ekleyeceğiniz resimler responsive özelliğine göre ayarlanmıştır. Buton, div, form elemananları ekleyecekseniz ölçü olarak yüzde(%) verin responsive özelliğini korusun.

download buton
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7276

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.