Question

I am working on zend framework, PHP and jQuery. I am working on popups sometimes. When any popup is open on the screen, we can still clicks links on webpage behind popup which causes some unexpected behaviour. How can I disable a webpage behind popup. I have seen some web application in which when popup appears then webpage behind popup become shady.

I have read some tutorial about this. In each tutorial a link is used to open a dialog and an special attribute is added in anchor tag for modal. But I have a different case I have to open dialog on some condition in action.

I check a condition in action after post like this:

$form = new Edit_Form( );
$this->view->form = $form;
$this->view->form->setAction($this->view->url());

$request = $this->getRequest();
if ( $request->isPost() ) {

   $values = $request->getParams();

   if( $values['edit'] ) {
        $this->view->openEditBox();
   }
}

Now check in view to see that it should open an edit pop or not:

if( $this->openEditBox ){
  $jsonOutput ['content'] = '<div class="DialogBox" title="Edit">' . $this->form->render() . '</div>';
  echo Zend_Json::encode($jsonOutput);
}

‘content’ is a DIV on my webpage.
Any Idea? Thanks

Answer 1

This is done via Javacript and is called a Modal Window.

You can achieve this easily with the Dialog component in JQueryUI. Other implementations are widely available.

$('.selector').dialog('option', 'modal', true);

---

You can use ZendX_JQuery_View_Helper_DialogContainer to create a modal dialog with ZF. You have to enable the library first though, as it is not part of the standard distribution. Then you can use the following in your View:

$this->dialogContainer('foo', 'I am a modal Dialog', array('modal' => true));

^{* Note: haven’t worked with these helpers, so the above snippet might need adjustment}

Usage of dialogContainer is pretty straightforward:

dialogContainer($id, $content, $params, $attribs):
Create a Dialog Box that is rendered with the given content.on startup. If the option ‘autoOpen’ set to false is specified the box will not be displayed on load but can be shown with the additional dialog(“open”) javascript function. See UI docs for details.

See the ZF manual for further information on how to setup and use ZendX_JQuery