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.
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.
<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>Documenttitle>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
head>
<body>
<div class="container mt-4">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
button>
<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 titleh5>
<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">Closebutton>
<button type="button" class="btn btn-primary">Save changesbutton>
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//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
