CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapyii2
J.K.A.
J.K.A.

Reputation: 7404

Yii2 Bootstrap Modal backdrop not working

I've created modal window using Yii2 bootstrap Modal. The default behaviour of Modal is if you click outside the modal area, the modal will automatically close. I want to prevent that behaviour means it should not close the modal window when clicking outside the modal.

Following is my Yii2 Modal Code:

<?php
Modal::begin([
    'header' => '<h4>Disapprove Request</h4>',
    'id' => 'disapproveModal',
    'size' => 'modal-lg',
    'class' => 'bg-gray',    
]);
?>

<div class="showmsg" style="display: none;"></div>
<div class="control-group">
    <label>Please select the reason of disapproval. Click on "Disapprove" to proceed and click on "Cancel" to remove dialog</label>
    <input type="text" name="disappr_txt" id="disappr_text" class="form-control" placeholder="Enter reason of disapproval" required>
</div>
<br/>

<?= Html::submitButton('Disapprove', ['class' => 'disapprovebtn btn btn-primary', 'value' => 'disapprove', 'name' => 'submit']); ?>            
<?= Html::a('Close', 'javascript:void(0);', ['class' => 'btn btn-primary closebutton', 'aria-hidden' => "true", 'data-dismiss' => "modal"]) ?>

<?php Modal::end(); ?>

As mentioned in twitter bootstrap site I've added backdrop=>static and keyboard=>false in JQuery modal options but still it not working and modal is getting closed after clicking on outside of modal area.

Following is my JQuery Code:

$(".showDisapproveModal").click(function () {
    $("#disapproveModal").modal({
        keyboard: false,
        backdrop: 'static'
    }).find('modalContent').load($(this).attr('value'));
});

Upvotes: 2

Views: 5782

Answers (2)

Harish ST
Harish ST

Reputation: 1503

<?php
Modal::begin([
    'header' => '<h4>Disapprove Request</h4>',
    'id' => 'disapproveModal',
    'size' => 'modal-lg',
    'class' => 'bg-gray', 
    'clientOptions' => ['backdrop' => 'static', 'keyboard' => false],
]);
?>

Add clientOptions as per Win Naung's answer in Modal

Upvotes: 0

Win Naung
Win Naung

Reputation: 71

I also faced this issue. I enabled to solve that issue using the code

'clientOptions' => ['backdrop' => 'static', 'keyboard' => false]

in the Modal:begin().

Upvotes: 7

Related Questions