Bootstrap kullanarak oluşturduğumuz kampanya modal butona tıklandığında değilde sadece sayfa açılışında kullanmak için basit bir script fonksiyon kullanıyoruz.
Kodların en alt satırında script mevcut fakat direk alıp kullanmak isteyen arkadaşlar için tüm kodları paylaştım.
|
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 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> /*RESPONSIVE VE EKRAN ORTALAMA CSS CLASSLARI*/ .vertical-alignment-helper { display:table; height: 100%; width: 100%; pointer-events:none; } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; pointer-events:none; } .modal-content { /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */ width:inherit; height:inherit; /* To center horizontally */ margin: 0 auto; pointer-events:all; } </style> </head> <body> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="vertical-alignment-helper"> <div class="modal-dialog modal-lg vertical-align-center"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="false">×</span></button> <img src="http://lorempixel.com/800/400" alt=""> </div> </div> </div> </div> </div> <!-- Tetikleyici Kodblogumuz (evet burda subliminal var :)--> <script type="text/javascript"> $(window).load(function() { $('#myModal').modal('show'); }); </script> </body> </html> |
Görsel temsilidir.