Search code examples
javascriptjqueryjquery-uiyiicjuidialog

CJuiDialog - how to hide the 'cross' that closes the dialog box?


I am trying to hide the 'cross' that appears in the top-right hand side of the Dialog box but there doesn't appear to be a setting for this within the CJuiDialog reference? Is there a way to do this??

I am essentially trying to force people to only be able to close the dialog pop-up box if they click the 'CLOSE' button that I have set. My code is below..

$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'questionnaire-dialog',
    'options'=>array(
        'title' => 'Questionnaire',
        'hide' => 'explode',
        'modal' => 'true',
        'width'=> '450px',
        'autoOpen'=>true,
        'show'=>array(
            'effect'=>'blind',
            'duration'=>1000,
        ),
        'buttons' => array(
            $(this).dialog("close");}',)
    ),
));

Solution

  • Add Jquery:

        $('.ui-dialog-titlebar-close').hide();
    

    OR

         $('.ui-dialog-titlebar-close').remove();
    

    OR

    Add CSS() method in Jquery:

    $('.ui-dialog-titlebar-close').css('display','none');
    

    Founded ui-dialog-titlebar-close class after inspecting element in browser.