Halo semuanya, kembali lagi di sahretech. 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

1. Buatlah sebuah file baru dengan nama index.html. Lalu copy script di bawah ini dan paste ke dalam file tersebut.



<!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">&times;</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 di atas adalah script dasar dalam membuat fitur modal ala bootstrap. Tidak ada yang berbeda dari modal biasanya. Saya hanya menggunakan contoh modal yang ada di dokumentasi bootstrap.

2. Selanjutnya, kita modifikasi modal agar dapat didrag. Silahkan copy script di bawah ini dan pastekan di atas tag </body>.



<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script>
    $('.modal-dialog').draggable();
</script>

Implementasinya sangat mudah, kalian tidak perlu banyak menambahkan script untuk membuat fitur draggable. Jika kalian memiliki project dengan fitur modal, sangat mudah untuk menambahkan fitur ini dengan waktu di bawah 1 menit.

Selanjutnya save project kalian, dan jika berhasil maka hasilnya akan tampak seperti gambar di bawah ini

Hasil modal draggable

Bagaimana?, mudah bukan. Sisanya bisa kalian improvisasi secara mandiri dengan menambahkan form, data atau gambar agar modal yang dibuat lebih menarik. Untuk contoh-contoh modal lainnya bisa kalian lihat di link berikut ini.

1. Membuat Modal/pop up Edit Data dengan Php dan Mysql

2. Membuat Edit Data dengan Modal Bootstrap pada Php

3. Cara Bikin Pop-Up Keren dan Responsive Kurang dari 5 Menit Hanya dengan Bootstrap

4. Cara Menggunakan Sweet Alert dan Modal pada Proses Insert Data pada Php

Sekian tutorial cara membuat modal bootstrap dapat digeser atau draggble modal. Semoga tulisan singkat ini bermanfaat. Jika ada pertanyaan, silahkan tanya langsung di kolom komentar di bawah ini. Sampai jumpa di tutorial keren dan menarik lainnya.

Sahretech

Membuat Modal Bootstrap Dapat Digeser atau Draggable Modal

Cara Membuat Fitur Draggable pada Modal Bootstrap

No comments

Kategori Pemrograman

Popular

Facebook