twitter-bootstrap
Modale dialoogvensters

Opmerkingen

Eenvoudig HTML-gebruik

Een Bootstrap-modaal dialoogvenster is een Bootstrap-onderdeel dat een modaal dialoogvenster maakt dat zweeft over inhoud op paginaniveau.

Hier is een voorbeeld van het basisgebruik van een modaal dialoogvenster van Bootstrap in HTML:

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Basis Javascript gebruik en initialisatie

Onderdelen van modale dialoog kunnen via jQuery worden geïnstantieerd met de functie $('#myModal').modal(options) , waarbij $('#myModal') een verwijzing op het hoogste niveau is naar de specifieke modale dialoog en options een Javascript-object is dat opgeeft de standaardattributen van het modale dialoogvenster.

De options object maakt het mogelijk om meerdere eigenschappen te definiëren die zal invloed hebben op hoe de modal dialoogvenster gedraagt. Deze eigenschappen zijn als volgt gedefinieerd:

• Met de eigenschap backdrop kan een gebruiker bepalen of hij al dan niet een grijze achtergrondoverlay achter het modale dialoogvenster wil weergeven. Beide Booleaanse waarden en de tekenreeks "statisch" worden herkend. Als "statisch" is opgegeven, wordt het modale dialoogvenster niet gesloten wanneer een gebruiker op de achtergrondoverlay klikt.
• Met de eigenschap keyboard kan een gebruiker bepalen of hij al dan niet wil dat het modale dialoogvenster wordt gesloten wanneer de escape-toets op het toetsenbord wordt ingedrukt.
• Met show eigenschap show kan een gebruiker bepalen of hij wel of niet het modale dialoogvenster wil laten verschijnen wanneer de modal wordt geïnitialiseerd.

Hier is een voorbeeld van het basisgebruik van Javascript:

$('#carModal').modal({ backdrop: false, keyboard: true, show: false });

Net als bij andere Bootstrap-componenten, kunnen de opties van de modal ook worden gespecificeerd in HTML via gegevensattributen.