CODEWITHSUNDEEP
twitter-bootstrapyii2
gugoan
gugoan

Reputation: 780

How open a bootstrap modal onload in View (Yii2)

I can not make a Bootstrap Modal open by loading a respective VIEW. Can you help me?

Example: When accessing just the address index.php?r=client/base I would like to pop a popup on the screen.

FULL PAGE EXAMEPLE

<?php

use yii\helpers\Html;
use yii\grid\GridView;


?>
<div class="visit-index">

    <div class="row">
      <div class="col-md-6"><h1><?= Html::encode($this->title) ?></h1></div>
      <div class="col-md-6"><span class="pull-right" style="top: 15px;position: relative;"><?php  echo $this->render('/base/_menu'); ?></span></div>
    </div>
    <hr/>

    <div class="row">
      <div class="col-md-7"><?php echo $this->render('_filter', ['model' => $searchModel]); ?></div>
      <div class="col-md-5"><?= Html::a('<span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> Link para Visitas Antigas', ['/visits/visits/index'], ['class' => 'btn btn-default pull-right']) ?></div>
    </div>
    <br/>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
    <script>
       function birthdays(){
          $.ajax({
              type:'POST',
              url:'index.php?r=/client/base/modal_birthdays',
              success: function(data)
                       {
                           $('#myModal').html(data);
                           $('#myModal').modal();
                       }
          });
       }
    </script>

    <div class="panel panel-default">
    <div class="panel-body">
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            [
            'attribute' => 'id',
            'headerOptions' => ['class' => 'text-center'],
            'contentOptions'=>['style'=>'width: 3%;text-align:center'],
            ],
            'observation:ntext',
            [
            'class' => 'yii\grid\ActionColumn',
            'template' => '{view} {update} {delete}',
            'contentOptions'=>['style'=>'width: 8%;text-align:center'],
            'headerOptions' => ['class' => 'text-center'],
            ],
        ],
    ]); ?>

    </div>
    </div>
</div>

Upvotes: 0

Views: 1407

Answers (1)

ZombieChowder
ZombieChowder

Reputation: 1204

$(function() {
    if ( document.location.href.indexOf('index.php?r=/client/base/modal_birthdays') > -1 ) {
        $('#myModal').focus();
    }
});

This jquery code should detect the URL as a string and then set focus (open) your modal. It'd be easier to help you if you post your full html code and everything.

Upvotes: 1

Related Questions