Oluşturduğunuz bir web sayfasının açılışında kullanıcılara bilgi vermek yada belirli bir görsel göstermek için modal lightbox eklentileri kullanabilirsiniz.
Bu yazıda sayfa açılışında açılan popup pencereler için bir kaç tane örnek hazırlanmıştır.
Sizde içlerinden beğendiğinizi kullanabilirsiniz.
1 – Jquery Dialog : Sayfanın açılışında açılan ilk popup örneği Jquery Dialog kutusudur.
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="tasarimkodlama.com" 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 – 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.
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>Tasarım Kodlama</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 >> www.tasarimkodlama.com</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> |
Yorum Yap