create a popup from a block

Question

I created a question a few weeks ago (https://magento.stackexchange.com/questions/64925/popup-review-form) about how to display a popup from an html block and not from a url and it has been deleted because it is too "broad". I personally find it clear, but nevermind.

I took time today to dig further and find a solution, and I think it could help people, that's why I create this thread with the solution.

Here's the original question (to allow search result to find this post):

I have a problem which seems really simple to resolve I think, but I'm kind of stuck on it.

I'm trying to display the "write your own review" form inside a popup without using external libraries like fancybox etc. This way customers will see the existing review list on the product page, and they'll be able to access the form to add a review by cliking on a link ('write a review') which display the form in a popup.

I looked for the js function popWin(), but I need to pass a URL in it and I don't have any, as my block review form is added through $this->getChildHtml('review_form').

I could create a hidden div and make it appear through js and CSS, but I really would like to keep using Magento's existing tools and keeping the same layout as the other popups.

Do you have an idea to put that block inside a popup ?

Answer 1

Note that the solution given below display a ask a question form and not the review form as detailed in the question, but it is the exact same process.

app/design/frontend/your_theme(default/default)/layout/Catalog.xml:

Add this in the head reference tags

 <action method="addJs"><script>prototype/window.js</script></action>
 <action method="addCss">
     <stylesheet>lib/prototype/windows/themes/magento.css</stylesheet>
 </action>

app/design/frontend/your_theme(default/default)/template/Catalog/Product/View.phtml:

<div id="product_info_udqa" style="display:none;"><?php echo $this->getChildHtml('info_udqa') ?></div>
<script type="text/javascript">
    document.getElementById("product_info_udqa_link").addEventListener("click", function(event){
        event.preventDefault();

        document.getElementById("product_info_udqa").setAttribute("style", "display:block");

        var win = new Window({title: "Ask a Question", className: "magento", zIndex:3000, destroyOnClose: true, recenterAuto:false, resizable: false, width:450, height:473, minimizable: false, maximizable: false, draggable: false});
        win.setContent("product_info_udqa", true, false);
        win.showCenter(true);

        win.setCloseCallback(function(){
            document.getElementById("product_info_udqa").setAttribute("style", "display:none");
            return true;
        });
    });
</script>