Forums

Hi guys,

I am looking to open some modal windows from button clicks on a chronoform. Im relatively new at this bespoke design stuff, as have always used extensions straight out of the box....

Anyway, i have some code from the getbootstrap website http://getbootstrap.com/javascript/#modals and would like to implement it in one of my forms. I have tried a custom code box button the buttons do not do anything. Basically what i want is similar to the modal popups that appear in the admin area when clicking to edit one of the DIVs. Is there a tutorial or any advise as to how i can do this?

Thank you in advance.

Donna

Hi Dorina,

Please see this FAQ.

I experimented a bit with the Bootstrap modal that you linked to, it works nicely if the form theme is set to None, With the other themes I think that it could be made to work with some custom CSS to override some parts of the CF CSS.

Bob

Hi Bob, as always I'm ever grateful for your support, i couldn't get the code i provided previously to work however i have managed to implement the code from the FAQs that you provided (I apologise, i only found the article following my post).

I have an additional question (as i'm a complete newbie to this sort of thing), can i change the text link to a button? This is my modified code, i have not yet modified the target.

<?php
// load the Joomla! modal code
JHtml::_('behavior.modal'); 
// Over-ride the default CF CSS for a modal link
$jdoc = \JFactory::getDocument();
$style = "
#modal_a {
  display: inline;
  position: relative;
}";
$jdoc->addStyleDeclaration($style);
?>
<div><a class="modal" id='modal_a' href="index.php?option=com_chronoforms5&chronoform=demo-basic-contact&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 450}}" >View Script</a>   
<a class="modal" id='modal_a' href="index.php?option=com_chronoforms5&chronoform=demo-basic-contact&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 450}}" >Send Email</a>    
<a class="modal" id='modal_a' href="index.php?option=com_chronoforms5&chronoform=demo-basic-contact&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 450}}" >Send SMS</a> 
</div>

Thank you in advance
Donna

Hi Donna,

You can use the Bootstrap btn class to have a link look like a button (see here).

Bob

Hi!
Chronoforms5 forms is the best!

The important question, is not easy to solve!
Get access from iframe to parent.
I open Chronoforms5 form in Modal window (Bootstrap window Joomla 3.4.3). my-form+noCaptcha

<iframe src="/index.php?option=com_chronoforms5&chronoform=my-form&tmpl=component" width="100%" height="510px"></iframe>

Full code

<a class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Open Form</a>
<!-- HTML code Modal window -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-idden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
				<h4 class="modal-title">Modal title</h4>
			</div>
			<div class="modal-body">
				<iframe src="/index.php?option=com_chronoforms5&chronoform=my-form&tmpl=component" width="100%" height="510px"></iframe>
			</div>
			<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>

How to close (auto-close) the window after submission?
Thank