bootstrap-modalAan de slag met bootstrap-modal


Opmerkingen

Deze sectie geeft een overzicht van wat bootstrap-modal is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen bootstrap-modal vermelden en naar de gerelateerde onderwerpen verwijzen. Aangezien de documentatie voor bootstrap-modal nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

Installatie of instellingen

Bootstrap Model wordt al geleverd met bootstrap.min.js Maar om het eenvoudiger en eenvoudiger uit te voeren te maken, moeten we onderstaande stappen volgen.

Installatie: -

Voeg gewoon onderstaande css en JS toe aan uw html-pagina.

<link href = " https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css " rel = "stylsheet">

<script src = " https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js " type = "text / javascript" />

Of

Je kunt het hele pakket downloaden via onderstaande link.

https://github.com/nakupanda/bootstrap3-dialog

Eenvoudig bericht met in Bootstrap Modal

De onderstaande code toont u het bootstrap-model zonder lange code te schrijven door het bootstrap-model tijdens runtime te genereren. Het maakt het ook eenvoudig om meerdere bootstrap-modellen te maken, dwz het ene op het andere. Volg onderstaande eenvoudige code om een eenvoudig bootstrap-model te maken.

Voeg onder CSS toe aan uw code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"/>
 

HTML-code voor uw model om gemakkelijk te tonen

Click Button next to see bootstrap popup with just simple message only.
    <button class="btn btn-primary" type="button" onclick="showModalNow()">Click Me</button>
 

Neem het onderstaande script op in uw code om het bootstrap-model gemakkelijk te laten werken

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js" type="text/javascript" />
<script>
    function showModalNow(){
        BootstrapDialog.show({
            message: 'Hi Apple!'
        });
    }
</script>