Web Sitelerinin açılışında kullanıcılara bilgi vermek yada belirli bir görsel göstermek için genellikle modal lightbox eklentileri kullanırız. Bu yazıda sayfa açılışında açılan popup pencereler için bir kaç tane örnek hazırlanmıştır.
1 – Jquery Dialog : Sayfanın açılışında açılan ilk popup örneği Jquery Dialog kutusunudur. ornek-1
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Yazılım Bilişim</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> </head> <body> <div id="uyari" title="YazilimBilisim.net" style="display:none;"> <p> Bu dialog kutusu sayfanın açılışında kullanıcılara gösterilmekteidr. </p> <img src="https://source.unsplash.com/random" width="100%"> </div> <!-- Script --> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $(function(){ // sayfa açılışında dialog kutusunun gelmesi için her hangi bir buton için yerleştirmedik $("#uyari").dialog({ width:600, //dialog kutusunun genişliği modal:true, //arkaplanın koyu olması autoOpen:true, //gerek yok ama otomatik açılması için position: { my: "center top", at: "center top" } //konum }); }) </script> </body> </html> |
2 – Avguard Modal ile sayfa yüklendiğinde ekrana uyarı olarak gelen popup penceresi. ornek-2
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Yazılım Bilişim</title> <link rel="stylesheet" href="style/avgrund.css"> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="sayfa"> <a href="#" id="show" class="button left">Dialog Kutusunu Göster</a> <div id="icerik"> <h1>Yazılım Bilişim</h1> <p>Bu yazı sadece bilgilendirme için yazılmıştır.</p> <img src="https://source.unsplash.com/random" width="100%"> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="jquery.avgrund.min.js"></script> <script> $(function() { $('#show').avgrund({ height: 600, showClose: true, showCloseText: 'kapat', onBlurContainer: '.sayfa', template: $("#icerik") }).click(); }); </script> </body> </html> |
3 – Bootstrap Modal : Site açılışında popup açmak için kullanabileceğiniz diğer bir alternatif de bootstrap modal nesnesidir. Eğer sitenizde responsive bir tasarım yapmak için bootstrap kullanıyorsanız. Ek başka bir eklenti kullanmadan sayfa açılışında lightbox göstermek için bootstrap modal kullanabilirsiniz. ornek-3
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Yazılım Bilişim Modal</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //sayfa açıldığında otomatik açılması için $("#modalNesne").modal('show'); }); </script> </head> <body> <!-- modal nesnesi başlangıç --> <div id="modalNesne" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Takip Et</h4> </div> <div class="modal-body"> <div class="col-md-12"> <img src="https://source.unsplash.com/random" class="img-responsive"> </div> <p>Sitemizdeki haberlerden ve duyurulardan haberdar olmak için aşağıdaki bilgileri doldurup gönder butonuna basmanız yeterli olacaktır..</p> <form> <div class="form-group"> <input type="text" class="form-control" placeholder="Adınız"> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="E-posta adresi"> </div> <button type="submit" class="btn btn-primary">Gönder</button> </form> </div> </div> </div> </div> <!-- // modal nesnesi bitiş --> </body> </html> |
hocam merhaba çok güzel anlattınız fakat son olanda butona bağlayabilirmiyiz ._?
Master page ile oluşturduğum aspx sayfasında bootstrap modal popup örneğinizi uygulamaya çalışıyorum ancak çalıştıramadım. Sitemde bootstrap kullanıyorum bu arada. İyi çalışmalar