1. Anasayfa
  2. Genel
  3. Bootstrap Modal Yalnızca "X" Düğmesiyle Kapatılması

Bootstrap Modal Yalnızca "X" Düğmesiyle Kapatılması

bootstrap-modal-yalnizca-x-dugmesiyle-kapatilmasi (büyük resim için tıklayın)

Bootstrap modal'larda kullanıcıların modalı yalnızca "X" düğmesiyle kapatmasını sağlamak için, modalın arka planına tıklayarak veya Esc tuşuyla kapanmasını engellemeniz gerekir. Bunu yapmak için Bootstrap'in modal özelliklerini kullanabilirsiniz.

  • data-backdrop="static": Modalın arka planına tıklanarak kapanmasını engeller.
  • data-keyboard="false": Esc tuşuyla modalın kapanmasını engeller.
  • Sadece "X" ile Kapatılabilir:
    • Kullanıcı yalnızca modalın sağ üst köşesindeki "X" simgesini kullanarak modalı kapatabilir.
    • Footer bölümünde kapatma butonu yoktur, sadece bilgilendirme içerir.

Örnek

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>X Harici Kapatılamayan Modal</title>

   <!-- Bootstrap CSS -->

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

   <!-- jQuery -->

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

   <!-- Bootstrap JS -->

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

   <div class="container">

       <h1>Hoş Geldiniz!</h1>

       <p>Bu modal yalnızca "X" düğmesiyle kapatılabilir.</p>

   </div>

 

   <!-- Modal -->

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" data-backdrop="static" data-keyboard="false">

       <div class="modal-dialog" role="document">

           <div class="modal-content">

               <div class="modal-header">

                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                       <span aria-hidden="true">×</span>

                   </button>

                   <h4 class="modal-title" id="modalLabel">Bilgilendirme</h4>

               </div>

               <div class="modal-body">

                   <p>Bu modal yalnızca köşedeki "X" düğmesiyle kapatılabilir.</p>

               </div>

               <div class="modal-footer">

                   <p>Alt kısımda kapatma butonu bulunmuyor.</p>

               </div>

           </div>

       </div>

   </div>

 

   <script>

       $(document).ready(function () {

           // Sayfa yüklendiğinde modalı göster

           $('#myModal').modal('show');

       });

   </script>

</body>

</html>

 

omurs

Ö S, 30 Ağustos 2018 Perşembe 15:30 tarihinde kayıt oldu

Etiketler

bootstrap modal 

Beğeni

Yıllara Göre Gönderiler

LombokLoglamaB2C (Business-to-Consumer)B2B (Business-to-Business)İçerik Yönetim Sistemi - CMS (Content Management System)Pagination (Sayfalama)Sanal Özel Ağ - VPN (Virtual Private Network)Cronjob (Zamanlanmış Görevler)Printer-YazıcıJava'daki İlkel Veri Tipleri ve Alabilecekleri DeğerlerBit & Byte ve Hafıza Boyutlarındaki Ölçüm BirimleriSanallaştırma (Virtualization)DNS KayıtlarıE-Fatura ve E-ArşivYazılım Lisans TürleriAudit (Denetim) Açık Kaynak (Open Source)Monitoring (İzleme)Sitemap & Robots.txtKilometretaşı (Milestone)BSMV (Banka ve Sigorta Muameleleri Vergisi)KKDF (Kaynak Kullanımı Destekleme Fonu)Siber Pazartesi (Cyber Monday)Black Friday (Kara Cuma)Hotlink.htaccessCryptoLockerMalwareTrojanWormDependency (Yazılım Geliştirme Sürecinde Paket Bağımlılığı)Configuration (Yazılım Geliştirme Sürecinde Yapılandırma)Yahoo ve Yahoo'nun Başarısızlık NedenleriArchiving (Yazılım Geliştirme Sürecinde Arşivleme)Görsel Dosya Türleri (Image Types)ReleaseVersioning & Tagging (Versiyonlama ve Etiketleme)BuildJob (Yazılım Geliştirme Sürecinde Görevler)SonarQubeCDATA (Character Data)Alan Adı Uzantıları (Domain Name Extensions)Regresyon Kara Kutu (Black-Box) TestBeyaz Kutu (White-box) TestGri Kutu (Grey-box) TestYazılım Geliştirme Sürecindeki Temel Test TürleriKod gözden geçirme (Code Review)Birim Testi (Unit Testing)Yazılım Sürecinde EntegrasyonJAR & WAREager & Lazy Fetch TypeMaskelemeKPI (Key Performance Indicator)KII (Key Impact Indicator)Projenin JAR Dosyasını Oluştur - JAR PathSunucu için Linux dağıtım SeçimiKonyteynerler (container technologies)Runtime & Compile Time (Çalışma ve Derleme Zamanı)@Anotasyonlar (@Annotations)

HIT 3

Görüntülenme Gönderi
4338 Faktöriyel
4328 LRU sayfa yer değiştirme algoritması (LRU-Least Recently Used page replace algorithm)
3665 Ubuntu 20.04 üzerinde Google Chrome Tarayıcı Kurulumu (Installing Google Chrome Browser on Ubuntu 20.04)



beyan

sitemap

2018 - 2025