Convert Bootstrap Modal HTML to string

Yii 2.0 General Discussions
1

Hi All,

I want to have in my DetailView a thumb image. When I click on this image, a modal window will be shown with the big image.

To do that, I want to create a function that returns the modal HTML content. But I don’t know how to do this.

Here is my Modal:




		\yii\bootstrap\Modal::begin([

		    'header'=> $model->getAttributeLabel('photo_club'),

		    'size'=> 'modal-lg',

		    'toggleButton' => [

		        'label'=>'Show Modal', 'class'=>'btn btn-default',

		        'tag' => 'img',

		        'src' => Yii::$app->functions->getImageUrl($model, 'photo_club'),

		        'height'=>'200',

		    ],

		    'footer'=>$model->nom_club,


		]).Html::img(Yii::$app->functions->getImageUrl($model, 'photo_club'));

		\yii\bootstrap\Modal::end();

In Yii 1.1 I used to convert a widget to string by adding true to the last paramater of the widget. Now with Yii2 I’m confused.

Anyone can help Please?

2

I hope I understood correctly, it is more question of jquery/javascript

attach to the thumb image an onclick action that call a javascript function which change the content of the modal and then show it.

in your case you want to show an image so assuming that you modal id is detailsBox and in it you have an image tag with id detailsBoxImage

Something like should work.




.......

var urlAbsolute=<set it the url of the image to show>

$(#detailsBoxImage).attr("src", urlAbsolute);

$("#detailsBox").dialog("open");

If you want to load the content of the modal via ajax:




var url='<controller>/<action>?id=nn'

$("#detailsBox").html("");

$("#detailsBox").dialog("option", "title", "Loading...").dialog("open");

$("#detailsBox").load(url, function() {

	$(this).dialog("option", "title", $(this).find("h1").text());

	$(this).find("h1").remove();

});

}

This should do the work.

3

Hi Roberto Braga,

Your solution is perfect for a javascript approche. And I think I’m not clear with what I’m looking for:

I want to do something like this ( I KNOW THIS CODE IS VERY FALSE ::) ) :




public function getModalContent($model, $attribute)

{

	$content = \yii\bootstrap\Modal::begin([

	    'header'=> $model->getAttributeLabel($attribute),

	    'size'=> 'modal-lg',

	    'toggleButton' => [

	        'label'=>'Show Modal', 'class'=>'btn btn-default',

	        'tag' => 'img',

	        'src' => Yii::$app->functions->getImageUrl($model, $attribute),

	        'height'=>'200',

	    ],

	    'footer'=>$model->{$attribute},


	]).Html::img(Yii::$app->functions->getImageUrl($model, $attribute));

	\yii\bootstrap\Modal::end();


	return $content;

}

Thanks in advance

4

So If I understand you have lets say 10 image on each image you want to attach a different single modal, in this way you have 10 modal in the code

At first I want to underline that is quite inefficient. You are going to replicate the modal several time overloading the html and javascript code.

But probably you know better than me your need as I do not have the whole picture of your project.

When I see public function getModalContent… I think you want to put this code in some classes.

I would use a simple function unless you foresee to do some more complicated and put more logic in the class.

I guess you wan to assign it directly to a variable and the echo it somewhere which is not possible as Modal::begin() and Modal::end() do an echo

But if instead doing something like:

$myModal=getModalContent($model, $attribute);

echo $myModal;

you can put getModalContent($model, $attribute); in the place where you need to echo it in the view you should achieve the same.

Another thing you can try is to play a bit with output buffering but I would avoid as it can interfere with yii output buffering if not properly managed.

Anyway buffering is stackable so something like the following should work properly:




function getModalContent($model, $attribute) {

	ob_start(); //start a new buffer

	Modal::begin([/*** my modal init **/ ]);

	/*

 	* modal content

 	*/

	Modal::end();

	return ob_get_clean(); // get the output of the last buffer opened and close it

}
5

This is what I want to do!

This is exactly my issue!

Now that I’ve tried with output buffering this works fine. Thank you very much Roberto.

I want to avoid using this solution too, but for now, it solves my problem.

Thanks again