twitter-bootstrap
Modala dialoger

Anmärkningar

Grundläggande HTML-användning

En Bootstrap-modaldialog är en Bootstrap-komponent som skapar ett modalt dialogfönster som flyter över innehåll på sidan.

Här är ett exempel på den grundläggande användningen av en Bootstrap-modaldialog i 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 -->

Grundläggande användning och initialisering av Javascript

Modala dialogkomponenter kan instanseras via jQuery med funktionen $('#myModal').modal(options) , där $('#myModal') är en toppnivåreferens till den specifika modaldialogen och options är ett Javascript-objekt som specificerar modaldialogrutans standardattribut.

options gör det möjligt att definiera flera egenskaper som kommer att påverka hur modaldialogen beter sig. Dessa egenskaper definieras som sådana:

• backdrop tillåter en användare att definiera om de vill att en grå bakgrundsöverlagring ska visas bakom den modala dialogen. Både booleska värden och strängen "statisk" känns igen. Om "statisk" anges stängs inte den modala dialogrutan när en användare klickar på bakgrundsöverlagringen.
• keyboard gör det möjligt för en användare att definiera om de vill att den modala dialogrutan ska stängas när man trycker på Escape-tangenten på tangentbordet.
• show gör det möjligt för en användare att definiera om de vill att modaldialogen ska visas när modalen initieras.

Här är ett exempel på den grundläggande användningen av Javascript:

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

Som med andra Bootstrap-komponenter kan modalens alternativ också anges i HTML via dataattribut.