Jendela Pop-up adalah jendela yang biasanya muncul secara tiba-tiba atau saat kita mengklik sebuah button ketika mengunjungi sebuah halaman web atau blog. Biasanya dalam sebuah website atau blog jendela popup diisi dengan iklan berupa sebuah gambar atau keterangan.
Langkah pertama
- Open Xampp
- Open Sumlime Text
- Folder Gambar
Buat file baru kemudian simpan file dengan nama index.php
- <html>
- <head>
- <title> popup animation </title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- <style type="text/css">
- .gallery__img{
- width: 250px;
- height: 150px;
- }
- .img{
- width: 100%;
- height: 100%;
- }
- .h5{
- color:black;
- }
- .modal h1{margin:0}
- .modal.fade .modal-dialog {
- background:rgba(0, 0, 0, 0.5);
- color:#fff;
- -webkit-transition: -webkit-transform .50s ease-out;
- -o-transition: -o-transform .50s ease-out;
- transition: transform .50s ease-out;
- -webkit-transform: translate(0, 100%) rotate(180deg) !important;
- -ms-transform: translate(0, 100%) rotate(180deg) !important;
- -o-transform: translate(0, 100%) rotate(180deg) !important;
- transform: translate(0, 100%) rotate(180deg) !important;
- }
- .modal.in .modal-dialog {
- background:rgba(0, 0, 0, 0.5);
- color:#fff;
- -webkit-transform: translate(0, 50%) rotate(360deg) scale(1.2, 1.2) !important;
- -ms-transform: translate(0, 50%) rotate(360deg) scale(1.2, 1.2) !important;
- -o-transform: translate(0, 50%) rotate(360deg) scale(1.2, 1.2) !important;
- transform: translate(0, 50%) rotate(360deg) scale(1.2, 1.2) !important;
- }
- .transparent h1{margin:0}
- </style>
- <div class="container">
- <!-- Button trigger modal -->
- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
- <img src="gambar/1.jpg" alt="Gallery image 1" class="gallery__img">
- </button>
- <!-- Modal -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h1>Gambar Laptop Hd</h1>
- </div>
- <div class="modal-body">
- <img src="gambar/1.jpg" alt="Gallery image 1" class="img">
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Save</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </head>
- <body>
- </body>
- <script src="bootstrap-4.3.1/js/bootstrap.min.js"></script>
- </html>
