Introduction

Currently Materialize supports three Modal types, all of which have a special behavior:
default (lean), fixed footer and bottom sheet.

All Modals have a close button and certain client options for the underlying JS plugin.

Default Modal type

<?php \macgyer\yii2materializecss\widgets\Modal::begin() ?>
<h1>Modal headline</h1>
<p>This is some arbitrary Modal content.</p>
<?php \macgyer\yii2materializecss\widgets\Modal::end() ?>

<button type="button" class="modal-trigger btn" data-target="w0">Show</button>
<div id="w0" class="modal">
    <div class="modal-content">
        <button type="button" class="modal-close">×</button>                
        
        <h1>Modal headline</h1>
        <p>This is some arbitrary Modal content.</p>
    </div>
</div>

Customizing toggle button

The toggle button is controlled by the $toggleButton property. It recognizes the special options tag and label.

If you do not wish the toggle button to be rendered or use any other element as the Modal's trigger, you can set this property to false.

The close button

The Modal class provides six different positions to be assigned to the close button:

• beforeContent: right before the content, inside the container ".modal-content"
• afterContent: right after the content, inside the container ".modal-content"
• beforeFooter: right before the footer content, inside the container ".modal-footer"
• afterFooter: right before the footer content, inside the container ".modal-footer"
• precedeContainer: directly before the container ".modal-content" opens
• succeedContainer: directly after the container ".modal-content" closes

To set the position use the respection class constant for the property $closeButtonPosition. This defaults to beforeContent.

The actual close button is controlled by $closeButton and can be manipulated like $toggleButton.

<?php \macgyer\yii2materializecss\widgets\Modal::begin([
    'toggleButton' => [
        'label' => 'Custom label'
    ],
    'closeButtonPosition' => \macgyer\yii2materializecss\widgets\Modal::CLOSE_BUTTON_POSITION_BEFORE_FOOTER,
    'closeButton' => [
        'tag' => 'div',
        'label' => 'close',
        'class' => 'light-grey btn btn-flat blue lighten-4'
    ]
]) ?>
<h1>Modal headline</h1>
<p>This is some arbitrary Modal content.</p>
<?php \macgyer\yii2materializecss\widgets\Modal::end() ?>

<button type="button" class="modal-trigger btn" data-target="w1">Custom label</button>
<div id="w1" class="modal">
    <div class="modal-content">                
        <h1>Modal headline</h1>
        <p>This is some arbitrary Modal content.</p>
    </div>
    <div class="modal-footer">
        <div class="light-grey btn btn-flat blue lighten-4 modal-close">close</div>
    </div>
</div>

Fixed Footer

Sometimes your Modal needs to hold very long content (terms of use, privacy declarations, etc.) and you want to be possible action buttons to be constantly visible. Here you can use the Modal type with fixed footer. Simply set the $modalType property to TYPE_FIXED_FOOTER.

Use $footer and $footerOptions to insert any code into the Modal footer. Please be advised that $footer is a string containing all your necessary HTML for the footer. With $footerOptions you can define HTML attributes for the footer container tag.

<?php \macgyer\yii2materializecss\widgets\Modal::begin([
    'modalType' => \macgyer\yii2materializecss\widgets\Modal::TYPE_FIXED_FOOTER,
    'footer' => Button::widget([
        'type' => Button::TYPE_FLAT,
        'label' => 'Get some beer!'
    ])
]) ?>
<h1>Modal headline</h1>
<p>This is some arbitrary Modal content.</p>
<?php \macgyer\yii2materializecss\widgets\Modal::end() ?>

<button type="button" class="modal-trigger btn" data-target="w3">Show</button>
<div id="w3" class="modal-fixed-footer modal">
    <div class="modal-content">
        <button type="button" class="modal-close">×</button>                
        
        <h1>Modal headline</h1>
        <p>This is some arbitrary Modal content.</p>
    </div>
    <div class="modal-footer">
        <button type="button" id="w2" class="btn btn-flat">Get some beer!</button>
    </div>
</div>

Bottom Sheet

This type of Modal is used to present information to the user at the bottom of the page. Nonetheless this still acts like a Modal.

<?php \macgyer\yii2materializecss\widgets\Modal::begin([
    'modalType' => \macgyer\yii2materializecss\widgets\Modal::TYPE_BOTTOM_SHEET
]) ?>
<h1>Modal headline</h1>
<p>This is some arbitrary Modal content.</p>
<?php \macgyer\yii2materializecss\widgets\Modal::end() ?>

<button type="button" class="modal-trigger btn" data-target="w4">Show</button>
<div id="w4" class="bottom-sheet modal">
    <div class="modal-content">
        <button type="button" class="modal-close">×</button>
        
        <h1>Modal headline</h1>
        <p>This is some arbitrary Modal content.</p>
    </div>
</div>

All customizing options can be applied to all three types of Modals.