Launch Bootstrap Modal on page load

Yii 2.0 General Discussions
1

hi i want to launch a bootstrap model on page load.

i tried following code and it worked kind of partially. ie, modal launched on page load but with no content.

what am i doing wrong

thanks

here is my code







  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

  <script src="http://code.jquery.com/jquery.js"></script>

  <script type="text/javascript" 	src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>




  <script type="text/javascript">

    $(window).load(function() {

        var url = jQuery(this).attr("href");

  		jQuery("#cityModal").find(".modal-body").load( url );

  		jQuery("#cityModal").modal({ backdrop: "static", keyboard: true });

  		return false;

    });

  </script>	





<div class="modal fade " id="cityModal" tabindex="-1" role="dialog" 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-label="Close"><span aria-hidden="true">&times;</span></button>

        	<h4 class="modal-title" id="myModalLabel">Select Your City</h4>

      	</div>

      	<div class="modal-body">

        	

      	</div>

      	<div class="modal-footer">

        	

        	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      	</div>

    	</div>

  	</div>

	</div>

here is the page that i want to pop up







<?php


use yii\helpers\Html;

use yii\widgets\ActiveForm;

use app\models\Movies;

use app\models\Screens;

use app\models\Theatres;

use app\models\Locations;

use app\models\ScreenClasses;

use app\models\ScreenShowTimes;

use app\models\MovieShows;

use app\models\ScreenClassSeats;

use yii\helpers\ArrayHelper;

use yii\helpers\Url;


 


?>


<style>


.btn-success {

margin-top: 25px;

}


</style>


<?php $form = ActiveForm::begin( [

                    'method' => 'post',

                    'action' => [ "site/back"],

                ] ); ?>

    

	<div class="col-md-5" id="select">

	<?php 

    $items = ArrayHelper::map(Locations::find()->all(), 'id', 'name');

	echo $form->field($model, 'name')->dropDownList($items, ['prompt'=>'Select a City'],['onchange'=>"myFunction()"])

	?>    

	</div>

    <div class="form-group">

       

       <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'OK') : Yii::t('app', 'Update'), ['name' => 'submit','class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary','name'=>'ajith']) ?>


    </div>


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


</div>
2

check your url




<script type="text/javascript">

    $(window).load(function() {

    var url = jQuery(this).attr("href");

    alert('URL: '+url);

    jQuery("#cityModal").find(".modal-body").load( url );

    jQuery("#cityModal").modal({ backdrop: "static", keyboard: true });

});

</script>

are you tryng to get your current url? Why are you returning false?




var url = $(location).attr('href');


or maybe


var url = '<?= \yii\helpers\Url::to(['site/index']);?>';

You can also use the yii2 modal widget




<script src="http://code.jquery.com/jquery.js"></script>

<?php

yii\bootstrap\Modal::begin([

    'header' => '<h2>Hello world</h2>',

    'headerOptions' => ['id' => 'modalHeader'],

    'id' => 'cityModal',

    'size' => 'modal-lg',

    'clientOptions' => ['backdrop' => 'static','tabindex'=>'-1']

]);

echo "<div id='modalContent'></div>";

yii\bootstrap\Modal::end();

?>

<script type="text/javascript">

    $(window).load(function() {

        var url = '<?= \yii\helpers\Url::to(['site/index']); ?>';

        $('#cityModal').modal('show');

        $('#modalContent').load(url);

    });

</script>

you should register your assets via asset bundels too.