We had included the bootbox.js library into the YiiBooster. Yup, whole Javascript library, just because it adds awesome stuff for handling simple modal windows.

Nevertheless, there is a new kid on the block, so we have include it as standard on our library. Check the following examples to see how easy is now:

$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Click me',
        'context' => 'primary',
        'htmlOptions' => array(
            'onclick' => 'js:bootbox.alert("Hello, World!")'
        ),
    )
);

Note We could obviously attach the javascript calls on document load. We attach the events to the onclick for the sake of the examples.

$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Confirm Modal',
        'context' => 'warning',
        'htmlOptions' => array(
            'onclick' => 'js:bootbox.confirm("Are you sure?", function(confirmed){console.log("Confirmed: "+confirmed);})'
        ),
    )
);
$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Prompt Modal',
        'context' => 'success',
        'htmlOptions' => array(
            'style' => 'margin-left:3px',
            'onclick' => 'js:bootbox.prompt("What is your name?", function(result){console.log("Result: "+result);})'
        ),
    )
);
$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Override Alert & Confirm Icons Modal',
        'context' => 'primary',
        'htmlOptions' => array(
            'style' => 'margin-left:3px',
            'onclick' => 'js:(function(){
	  	bootbox.setIcons({
            "OK"      : "icon-ok icon-white",
            "CANCEL"  : "icon-ban-circle",
            "CONFIRM" : "icon-ok-sign icon-white"
        });

        bootbox.confirm("This dialog invokes <b>bootbox.setIcons()</b> to set icons for the standard three labels of OK, CANCEL and CONFIRM, before calling a normal <b>bootbox.confirm</b>", function(result) {
            bootbox.alert("This dialog is just a standard <b>bootbox.alert()</b>. <b>bootbox.setIcons()</b> only needs to be set once to affect all subsequent calls", function() {
                bootbox.setIcons(null);
            });
        });
	  })();'
        ),
    )
);
$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Prompt Modal',
        'htmlOptions' => array(
            'onclick' => 'js:bootbox.modal(
                "<img src=\"' . bu('images/placeholder600x400.gif') . '\"/>",
                "Modal popup!"
            );'
        ),
    )
);

We also included very, very nice notification library called notify.js. It provides amazingly simple ways to make a quick notifications for users of your UI.

Note Read the documentation and/or visit its GitHub repo to learn more. There is only a rudimentary examples below.

Here's how you make page-wide notification (default is topright corner of the page area):

$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Free notifications here',
        'htmlOptions' => array(
            'onclick' => 'js:$.notify("Hi! Look here!", "info")'
        )
    )
);

Here's how you make a notification for just a selected element:

echo CHtml::tag('p', array('id' => 'notification-target'), 'Here I am...');
$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Click!',
        'htmlOptions' => array(
            'onclick' => 'js:$("#notification-target").notify("...thinking of myself.")'
        )
    )
);

Note For God's sake, never really write code like above, where you stuff Javascript code into string arguments of PHP calls. All your Javascript should be in separate files, ideally. These examples were written like this only for demonstration purposes, so you can copypaste them into your project and immediately see for yourself.