Modal Div Appearing On Top?

I am using the YiiBooster widget described here.

The issue I am having is that even when the modal window has not been clicked and is not visible, it is still covering up other elements on the page.

I noticed that I could not click any of the links near the top middle of the page. When I examined with Firebug, I saw that there was an invisible div covering everything up.

Here is a screenshot:

Here is the code:




	<?php $this->beginWidget('bootstrap.widgets.TbModal', array('id' => 'myModal')); ?>


	<div class="modal-header">

	    <a class="close" data-dismiss="modal">&times;</a>

	    <h4>Modal Header</h4>

	</div>


	<div class="modal-body">

	    A message goes here...

	</div>


	<div class="modal-footer">

	    <?php

	    $this->widget('bootstrap.widgets.TbButton', array(

		'label' => 'Close',

		'url' => '#',

		'htmlOptions' => array('data-dismiss' => 'modal'),

	    ));

	    ?>

	</div>


	<?php $this->endWidget(); ?>

Anyone?

Try setting the class to hide.

[i]

[/i]




<?php

$this->widget('bootstrap.widgets.TbButton', array(

	'label' => 'Close',

	'url' => '#',

	'htmlOptions' => array(

		'class' => 'hide',

		'data-dismiss' => 'modal'

	)

));

?>



Matt