Barebone\Bootstrap\Modal

Static example

A rendered modal with header, body, and set of actions in the footer.

<?php
    
    $modal = new Barebone\Bootstrap\Modal('Title modal', 'Some text for the modal body.');
    $modal->addCancelbutton('Cancel');
    $modal->addButton('Save stuff', "alert('You clicked: Save stuff')");
    $modal->debug(); // shows the dialog in the page for debugging purpose.
    echo $modal;

<div id="myModal" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Title modal</h4>
</div>
<div class="modal-body">Some text for the modal body.</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button class="btn-primary btn" type="button" onclick="alert('You clicked: Save stuff')">Save stuff</button>
</div>
</div>
</div>
</div>

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div id="myModal" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Title modal</h4>
</div>
<div class="modal-body">Some text for the modal body.</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button class="btn-primary btn" type="button" onclick="alert('You clicked: Save stuff')">Save stuff</button>
</div>
</div>
</div>
</div>

Optional sizes

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.

<div id="myModallg" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModallgLabel" aria-hidden="true" data-keyboard="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModallgLabel">Title modal large</h4>
</div>
<div class="modal-body">Some text for the modal body.</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button class="btn-primary btn" type="button" onclick="alert('You clicked: Save stuff')">Save stuff</button>
</div>
</div>
</div>
</div>
<div id="myModalsm" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalsmLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalsmLabel">Title modal small</h4>
</div>
<div class="modal-body">Some text for the modal body.</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button class="btn-primary btn" type="button" onclick="alert('You clicked: Save stuff')">Save stuff</button>
</div>
</div>
</div>
</div>

• Barebone\Bootstrap\Modal

  Barebone\Bootstrap\Modal extends Barebone\Bootstrap\Element
  • [P] $_id : string
  • [P] $dialog : Element
  • [P] $content : Element
  • [P] $header : Element
  • [P] $title : Element
  • [P] $body : Element
  • [P] $footer : Element
  • [M] __construct( $title, $content, $id ) : void
  • [M] backdrop( $backdrop ) : void
  • [M] closeOnEscape( $keyboard ) : void
  • [M] debug() : void
  • [M] addCancelbutton( $caption, $attributes ) : void
  • [M] addButton( $caption, $callback, $attributes, $data ) : void
  • [M] large() : void
  • [M] small() : void
  • [M] getDialog() : Barebone\Bootstrap\Element
  • [M] getContent() : Barebone\Bootstrap\Element
  • [M] getHeader() : Barebone\Bootstrap\Element
  • [M] getTitle() : Barebone\Bootstrap\Element
  • [M] getBody() : Barebone\Bootstrap\Element
  • [M] getFooter() : Barebone\Bootstrap\Element
  • [M] setDialog( Barebone\Bootstrap\Element $dialog ) : void
  • [M] setContent( Barebone\Bootstrap\Element $content ) : void
  • [M] setHeader( Barebone\Bootstrap\Element $header ) : void
  • [M] setTitle( Barebone\Bootstrap\Element $title ) : void
  • [M] setBody( Barebone\Bootstrap\Element $body ) : void
  • [M] setFooter( Barebone\Bootstrap\Element $footer ) : void

  • Barebone\Bootstrap\Element

    Barebone\Bootstrap\Element extends Barebone\HTML\TElement
    • [M] __construct( string $tag, array $attributtes ) : void
    • [M] muted( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] primary( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] success( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] info( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] warning( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] danger( string $context ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Contextual
    • [M] align( string $alignement ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Visibility
    • [M] invisible() : void

      ↳ trait: Barebone\Bootstrap\Traits\Visibility
    • [M] hide() : void

      ↳ trait: Barebone\Bootstrap\Traits\Visibility
    • [M] show() : void

      ↳ trait: Barebone\Bootstrap\Traits\Visibility
    • [M] tooltip( string $tooltip, string $placement ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Interactive
    • [M] popover( string $title, string $content, string $placement ) : void

      ↳ trait: Barebone\Bootstrap\Traits\Interactive

    • Barebone\HTML\TElement

      Barebone\HTML\TElement
      • [P] $tag : string
      • [P] $innertext : string
      • [P] $children : array
      • [P] $attributes : array
      • [P] $non_closing_tags : mixed
      • [M] __construct( string $tag, array $attributes ) : void
      • [M] append( Barebone\HTML\TElement $element ) : void
      • [M] prepend( Barebone\HTML\TElement $element ) : void
      • [M] class_exists( $cssclass ) : void
      • [M] add_class( $cssclass ) : void
      • [M] remove_class( $cssclass ) : void
      • [M] innertext( string $value ) : void
      • [M] data( string $name, string $value ) : void
      • [M] aria( string $name, string $value ) : void
      • [M] on( string $event, string $callback ) : void
      • [M] css( string $identifier, string $rule ) : void
      • [M] wrap( string $tagname, array $attributes ) : void
      • [M] enable() : void
      • [M] disable() : void
      • [M] has_closing_tag() : void
      • [M] has_children() : void
      • [M] count_children() : void
      • [M] get_children() : void
      • [M] replace_child( $key, $new_child ) : void
      • [M] get_child( $key ) : void
      • [M] __unset( $name ) : void
      • [M] __isset( $name ) : void
      • [M] __set( $name, $value ) : void
      • [M] __get( $name ) : void
      • [M] render() : void
      • [M] __toString() : string
      • [M] editable() : void