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ükleyin.


<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

Murat tokgöz 01/06/2020

kardeş notpadd de kodlama yapıyorum. yazdıktan sonra altına .kutu yazıyorum değerleri yazdım. alt kısmda div açtım ama Tasarımda gözükmüyor. yardımcı olur musun

yönetici 02/06/2020

Murat, Download butonuna bas dosyaları indir Çalışan bir örnek var.

Hüseyin Ferahlı 17/10/2022

Merhaba, Modal dışında bir yere tıkladığımda Modal kapanmasın istiyorum yardımcı olabilirseniz sevinirim.

yönetici 20/10/2022

Denedim, modal dışında bir yere tıkladığında kapanıyor.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

2286

KATEGORÄ°
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MÄ°THRÄ°L FRAMEWORK
  • Laravel
  • Git
  • React
POPÃœLER MAKALE
  • HTML LÄ°NK(BaÄŸlantı)EKLEME - LÄ°NK VERME
  • HTML YAZI VE RESÄ°M ORTALAMA
  • HTML RESME LÄ°NK VERME
  • HTML FORM OLUÅžTURMA
  • CSS YATAY MENÃœ YAPIMI
  • HTML RESÄ°M EKLEME
  • CSS (BOYUT) GENÄ°ÅžLÄ°K VE YÃœKSEKLÄ°K (Width-Height)
  • HTML DÄ°V ve SPAN NEDÄ°R?
  • HTML ARKAPLANA MÃœZÄ°K EKLEME
  • KALÄ°TE KAYBETMEDEN RESÄ°MLERÄ° BÃœYÃœTME
ETÄ°KET
WEBCEBİR © 2013 Tüm hakları saklıdır.