Halo semuanya, kembali lagi di tulisan saya. Baiklah pada kesempatan kali ini kita akan belajar cara membuat modal bootstrap yang dapat digeser-geser atau istilah kerennya draggable modal. Penasaran?, ayo ikuti selengkapnya berikut ini.
Jika biasanya saat membuat modal, modal akan berada di posisi statis. Berada di tengah dan tidak bisa digeser kemana-mana. Tapi ada kalanya, saat kalian membuat aplikasi dengan fitur modal, modal yang bisa digeser cukup membantu pengguna, fitur ini tentu berkaitan dengan UI/UX dan bisa meningkatkan kenyamanan pengguna.
Draggable modal adalah modal dengan fitur yang dapat digeser kemana pun. Biasanya fitur ini digunakan untuk melihat data yang tertutupi oleh modal. Jika tidak ada fitur draggble modal, maka user harus menutup modalnya terlebih dahulu agar dapat melihat data yang ada di belakangnya. Jika kalian penasaran dengan hasilnya, silahkan langsung menuju bagian akhir dari artikel ini.
Baca Artikel Lain ✨ |
📰 1. Study Case : Membuat Website Berita dengan menggunakan NewsAPI dan Bootstrap read more |
📰 2. Cara Memuat Website Pencarian Trending dengan Google Trends dan Php read more |
📰 3. Apa itu Brute Force Attack dan Berikut Tips Manjur Untuk Mencegahnya Komputer read more |
Cara Membuat Fitur Draggable pada Modal Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="container mt-4">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
</body>
</html>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script>
$('.modal-dialog').draggable();
</script>
Hasil modal draggable |
Posting Komentar