Magento Adminhtml Javascript Popup Dialog

Magento Adminhtml Javascript Popup Dialog

Recently,I needed to add functionality to open javascript Popup dialog inside Magento Adminhtml area to perform some operations and then to handle onClose action to fill the form that called popup.
After some researching on most easier way to do that, I finally found the solution that suited my needs.

Let me share with you the simple way to use Popup Dialog from adminhtml area I used.
(Code below is just sample code and I assume that you are familiar with adminhtml forms and layout update and that you will know how to transfer this samples into your sourcecode.)

1. Create some Adminhtml form block in which you will add the button that will call our popup dialog.

For example:

<?php
 
/**
*
* @author Darko Goleš <darko.goles@inchoo.net>
*/
class Inchoo_TestModule_Block_Adminhtml_TestPopup_Edit_Form extends Mage_Adminhtml_Block_Widget_Form {
 
protected function _prepareForm() {
 
$form = new Varien_Data_Form(array(
'id' => 'edit_form',
'action' => $this->getUrl('*/*/save'),
'method' => 'post',
'enctype' => 'multipart/form-data',
)
);
 
$base_fieldset = $form->addFieldset(
'base', array(
'legend' => Mage::helper('testmodule')->__('Test data'),
)
);
 
$base_fieldset->addField(
'authorize_btn', 'button', array(
'name' => 'authorize_btn',
'label' => Mage::helper('testmodule')->__(
'Click on folowing link to test popup Dialog:'
),
'value' => $this->helper('testmodule')->__('Test popup dialog >>'),
'class' => 'form-button',
'onclick' => 'javascript:openMyPopup()'
)
);
 
$form->setUseContainer(true);
$this->setForm($form);
 
parent::_prepareForm();
}
 
}

You can notice that I added a button that calls: javascript:openMyPopup();

2. After that we need to set custom template file for this screen in order to be able to add custom javascript in document:

Add in some of layout xml files inside app/design/adminhtml/yourpackage/yourtheme/layout …

<?xml version="1.0"?>
<layout>
<adminhtml_yourcontroller_youraction>
<reference name="content">
<block type="testmodule/adminhtml_testscreen"
name='inchoo.restconnect.adminhtml.testscreen' template="testscreen/edit.phtml">
</block>
</reference>
<reference name="head">
<action method="addItem">
<type>js_css</type>
<name>prototype/windows/themes/default.css</name>
</action>
<action method="addCss">
<name>lib/prototype/windows/themes/magento.css</name>
</action>
</reference>
</adminhtml_yourcontroller_youraction>
</layout>

As you can see, we added our edit screen’s block in content and set the custom template to it.
Also we added some css references into the head block in order to apply predefined Magento admin theme styles on out Popup dialog.

3. Let’s finally show how our template file should look like:

<?php echo $this->getFormInitScripts() ?>
<script type="text/javascript">
function openMyPopup() {
 
var url = '<?php echo $this->getUrl('adminhtml/dashboard/index') ?>?';
 
if ($('browser_window') &amp;&amp; typeof(Windows) != 'undefined') {
Windows.focus('browser_window');
return;
}
var dialogWindow = Dialog.info(null, {
closable:true,
resizable:false,
draggable:true,
className:'magento',
windowClassName:'popup-window',
title:'Test popup Dialog',
top:50,
width:300,
height:150,
zIndex:1000,
recenterAuto:false,
hideEffect:Element.hide,
showEffect:Element.show,
id:'browser_window',
url:url,
onClose:function (param, el) {
alert('onClose');
}
});
}
 
function closePopup() {
Windows.close('browser_window');
}
 
</script>
<div class="content-header">
<?php echo $this->getHeaderHtml() ?>
<p class="form-buttons"><?php echo $this->getButtonsHtml('header') ?></p>
</div>
<?php echo $this->getFormHtml() ?>
<?php if ($this->hasFooterButtons()): ?>
<div class="content-footer">
<p class="form-buttons"><?php echo $this->getButtonsHtml('footer') ?></p>
</div>
<?php endif; ?>
<?php echo $this->getFormScripts() ?>

Here you can see the function openMyPopup() that opens the dialog.
Also, you can notice that we have the callback function onClose() implemented: that triggers after we close Popup dialog.

One more handy function is implemented and that is: closePopup() function. When some operation in popup dialog is finished, we can call:

this.parent.closePopup();

from Dialog window document.

As you can see we use Magento’s Dialog class to create popup dialog. It can take number of configuration options that we can use to make this dialog popup suit our needs.
To get more info on Dialog class and its options, just take a look at the “js\prototype\window.js” file in your Magento installation files.

PopupDialog1

Cheers 🙂

You made it all the way down here so you must have enjoyed this post! You may also like:

Extending Magento 2 default JS components Filip Svetlicic
Filip Svetlicic, | 12

Extending Magento 2 default JS components

Enabling Multi-part MIME Emails in Magento Tomislav Nikcevski
Tomislav Nikcevski, | 3

Enabling Multi-part MIME Emails in Magento

Prevent PO Boxes in shipping address field on Checkout Nikola Stojiljkovic
Nikola Stojiljkovic, | 8

Prevent PO Boxes in shipping address field on Checkout

18 comments

  1. What if I’m new to Magento and don’t know how to transfer this code to my own module. Any other guides I need to read before doing this?

  2. Popup window in magento is really made easy from this article.

    can u help me in closing the popup by click outside the (popup) window.

  3. How to add image in header of popup at place of ‘Test popup dialog’. And How to add custom button at place of close button ?
    Thanks in advance.

  4. To close the dialog window from inside the child, it is actually not this.parent.closePopup()

    It is

    window.parent.closePopup()

  5. I want to display the order success message in the popup once the order was confirmed instead of redirecting to the success page.

  6. i want to display checkout page in the popup when i m click on add to cart page plz help me

  7. This is good but it dosent work in IE8 (not sure abt other versions). It throws error “Object doesn’t support this property or method” in window.js line no-1549 (win.getContent().innerHTML = content;).

    I spent lot of time debugging but no success. Any suggestions please.

  8. How would you do this in the front end? I’ve been trying to use window.js for popup image in the product page but with no sucess… Thanks!

  9. Thanks for the code, very useful – although my popup window is not opening as a popup but rather it’s launching within the active window in the top left hand corner. Is there a “target” variable we need as well?

    1. @Gen, you should check loaded Magento admin js files and css in your page.

    2. Hi @Gen,

      You are right and i have fixed this issue please open default.css file PATH : “js/prototype/windows/themes/default.css” and copy all code and past in custom.css file PATH : “skin/adminhtml/default/default/custom.css” and check i think your issue is fixed…. 🙂 Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.