Display form in a modal window
Although this article is part of the Visforms documentation, many aspects of the article cover common strategies about displaying any sort of content of a Joomla! website in a modal window.
Basically it is possible to display a Visforms form in a modal window.
Using modal windows to display content in Joomla! - some basics
The use of modal windows rely on implementations of your template. Especially it is imperativ, that your template css implements the class .modal, so that an HTML-Tag with a class"modal" attribute is positioned "modal".
Add "Page Class" modal
One way to display a form (or some other content) in a modal window is to add the value " modal" (with leading blank) to the menu item option "Page Class" on the "Page Display" tab. As a result the form will be displayed in a modal window that overlays the rest of the website. When you use a result text with the form, the result text is displayed in the modal window as well. One big problem with that design is, that there is no option for the user to close the modal window, and that it is difficult to add such an option to the code. If the user wants to "close" the modal window they have to click on a link of the website which luckily is visible beneath the modal window. All in all this is no satisfying option.
Use a component template
Joomla! supports the use of an url parameter "tmpl". This parameter expects the name of a (php) file (without file extension) as value. This file (I'll call it tmpl-file) has to be located in the root of your template folder. Mostly this file is named component.php but basically you can use any filename, which would give you the option to create different tmpl-files.
Using a tmpl-file allows you to create modal windows much more flexible than the use of the class attribute "modal" as described above, because you can write custom code in the tmpl-file for example, to add a "Close"-Button to the modal window, that redirects to a specified page.
Creating a modal form with a component template
The component.php file
First you need a tmpl-file in the root of your template. You can check if there already exists a file component.php (which you might adapt) or you can create your own file. In this instruction I will use a file named component.php.
If you want to create a modal window with a close button this file should contain at least the following code
<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Add Stylesheets
$doc->addStyleSheet('templates/' . $this->template . '/css/template.css');
// Load optional rtl Bootstrap css and Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="language; ?>" lang="language; ?>" dir="direction; ?>">
<head>
<jdoc:include type="head" />
</head>
<body class="contentpane modal">
<p><a href="/index.php">Close ×</a></p>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
You may have to adapt the css file location and or name.
The menu item
Instead of creating a menu item of type Visforms you have to create a menu item of type "external link" in order to display a form in a modal window using the tmpl-file. Enter the following url into the "Link" option of this menu item. You have to adapt the url/to/your/website and the id value (enter the id of the form which you want to display, which may not be 1 as in the example).
http://url/to/your/website?option=com_visforms&view=visforms&id=1&tmpl=component
Basically these are the steps required to display a form consistantly in a modal window that can be closed by the user throughout the entire submit process. Most certainly you will need to customize or add css in your template css, in order to style the modal window.