Bootstrap - Modals


Keriranje modaliteta pomoću Bootstrap-a

Modal je u osnovi dijaloški okvir ili pop-up prozor koji se koristi za pružanje važnih informacija korisniku ili poziva korisnika da poduzme potrebne radnje prije nego što krene dalje. Modali se široko koriste za upozoravanje korisnika na situacije poput isteka vremena sesije ili za dobijanje njihove konačne potvrde prije nego što izvrše bilo kakve kritične radnje poput spremanja ili brisanja važnih podataka. Pomoću modalnog dodatka Bootstrap-a lako možete stvoriti vrlo pametne i fleksibilne dijaloške okvire. Sljedeći primjer daje osnovnu strukturu za stvaranje jednostavnog modalnog oblika sa zaglavljem, tijelom poruke i podnožjem koji sadrže dugme za korisnika.

<div class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Potvrda</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>                
            </div>
            <div class="modal-body">
                <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">Sačuvaj</button>
            </div>
        </div>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Modal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Potvrda</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                    <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                    <button type="button" class="btn btn-primary">Sačuvaj</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Aktiviranje modala putem atributa podataka

Možete aktivirati Bootstrap modal klikom na dugme ili link putem atributa podataka bez pisanja bilo kog JavaScript koda. Pogledajte sljedeći primjer da biste vidjeli kako to funkcioniše:

<!-- HTML dugme (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Pokreni Demo Modal</a>
    
<!-- HTML Modal -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Potvrda</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">Sačuvaj</button>
            </div>
        </div>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Aktiviranje modala putem atributa podataka</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- HTML dugme (to Trigger Modal) -->
    <a href="#myModal" role="button" class="btn btn-lg btn-primary" data-toggle="modal">Pokreni Demo Modal</a>

    <!-- HTML Modal -->
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Potvrda</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                    <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                    <button type="button" class="btn btn-primary">Sačuvaj</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


Aktiviranje modala putem JavaScript

Takođe možete aktivirati modalni prozor Bootstrap-a putem JavaScripta, samo pozovite modal() metodu Bootstrap-a s modalnim ID-om ili selektorom klase u svom JavaScript kodu.

<script>
$(document).ready(function(){
    $(".btn").click(function(){
        $("#myModal").modal("show");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Modals sa JavaScript-om</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function(){
        $(".btn").click(function(){
            $("#myModal").modal('show');
        });
    });
</script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- HTML dugme (to Trigger Modal) -->
    <button type="button" class="btn btn-lg btn-primary" data-toggle="modal">Pokreni Demo Modal</button>

    <!-- HTML Modal -->
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Potvrda</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Želite li da sačuvate dokument prije zatvaranja?</p>
                    <p class="text-secondary"><small>Ako ne sačuvate izgubićete promjene!</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                    <button type="button" class="btn btn-primary">Sačuvaj</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>                            


Promjena veličine modaliteta

Bootstrap vam daje mogućnost daljeg skaliranja modaliteta gore ili dolje. Možete stvoriti male, velike, kao i ekstra velike modele dodavanjem dodatne klase .modal-sm, .modal-lg i .modal-xl, odnosno u .modal-dialog. Pogledajmo primjer:

<!-- Extra veliki modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#extraLargeModal">Extra veliki modal</button>
    
<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Extra veliki Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                
            </div>
            <div class="modal-body">
                <p>Dodajte klasu <code>.modal-xl</code> u klasu <code>.modal-dialog</code> da kreirate extra veliki modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Veliki modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Veliki modal</button>
    
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Veliki Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                
            </div>
            <div class="modal-body">
                <p>Dodaj klasu  <code>.modal-lg</code> u <code>.modal-dialog</code> da kreirate velikimodal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
    
<!-- Mali modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Mali modal</button>
    
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mali Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                
            </div>
            <div class="modal-body">
                <p>Dodaj klasu <code>.modal-sm</code> u klasu <code>.modal-dialog</code> da kreirate mali modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IT TUTORIJALI  | Bootstrap 4 Veliki, Extra veliki i mali modal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
<!-- Extra veliki modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#extraLargeModal">Extra veliki modal</button>
    
<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Extra veliki Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                
            </div>
            <div class="modal-body">
                <p>Dodajte klasu <code>.modal-xl</code> u klasu <code>.modal-dialog</code> da kreirate extra veliki modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Veliki modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Veliki modal</button>
    
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Veliki Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                
            </div>
            <div class="modal-body">
                <p>Dodaj klasu  <code>.modal-lg</code> u <code>.modal-dialog</code> da kreirate velikimodal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
    
<!-- Mali modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Mali modal</button>
    
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mali Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                
            </div>
            <div class="modal-body">
                <p>Dodaj klasu <code>.modal-sm</code> u klasu <code>.modal-dialog</code> da kreirate mali modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Odustani</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>