Popup-Problem/Display Message

Hi

I wanted that for "On submit" a pop-up with the contents of display message comes up.
For this I have a Display Message:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h4 class="modal-title" id="myModalLabel">Nachricht</h4>
       </div>
       <div class="modal-body">
         Vielen Dank für Ihre Anfrage.</div>
     </div>
   </div>
 </div>

in the "Load JavaScript"

jQuery (document) .ready (function ($) {
  $ ('# myModal') modal ('show'). 
  }); 

It's a pop-up on but I have the Joomla CMS pagination as "Tabs". (see screen)
Only when I again click on the tab "booking form", comes the popup.
But the popup, or the message should be above the page.
[attachment=0]screen.JPG[/attachment]
Does anyone know how to do that?

Thanks in advance.
F.

What I mean is:
The pop-up message will automatically lie on the Joomla-page with the Tab-Page Breaks and not only go up if I have the tab "booking form" clicked.
Otherwise, everything works fine. I think it is only because of this script:

jQuery(document).ready(function($){
 $('#myModal').modal('show');
 });

You want the popup to appear only when the tab is clicked ? if yes then you need to assign the function to the tab's click event:

jQuery("#tab_id").on("click", function($){
 $('#myModal').modal('show');
 });

Hi Max,

I apologize for my bad english. 😶
I have selected the display "tabs" in the "Page break plugin" Joomla. (see screen1)
[attachment=0]screen1.jpg[/attachment]
The pop-up is now, unfortunately, only when I again click on the tab "Buchungsformualr" to "on submit". This is not to be.
[attachment=1]screen2.jpg[/attachment]

I suggest to use the Firebug plugin in Firefox to see what happens.

Rob

:oops:
I do not know exactly how to express it understandable.

You can structure the content on a post page in Joomla with 3 different page breaks (page break).
1 "sides"
2 "Slider"
3 "Tabs"

When I run the page content with "tabs" strukuriere on a post page in Joomla, then it looks like in the screen above
(Tab page breaks: Hotelbeschreibung, Kontaktdaten, Preise/Konditionen, Buchungshinweise, Buchungsformular))

Under the Tab-Page Break "booking form" is the ChronoForms form.
If there (on submit) is pressed in the form submit button, then the javascript is loaded (load JavaScript):

jQuery (document) .ready (function ($) {
  $ ('# myModal') modal ('show'). 
  }); 

Unfortunately, the popup does not appear automatically on the Joomla article page with the tab page breaks, but only when I ancklicke the tab "Booking Form" appears on the popup with the message. But this is not right.
The popup with the message must go up automatically after sending the form.

LG
F.

So you want the popup to appear AFTER the form is sent ? then put your popup code inside a "custom code" action at the "on submit" event in your form!

Regards,
Max

Hi Max,

this is my setup-code:
[attachment=0]screen.jpg[/attachment]

And the modal doesn't show after the form is submitted ?

Hi Max,

Yes, but only, when I click on the tab "Buchungsformular" after click "on submit".
I would be enough if the popup comes up automatically, such as in this script on the page.:

jQuery (document) .ready (function ($) {
  alert ("Thanks!"); 
  }); 

But unfortunately this pop-up does not look as nice as the self-programmed popup.

LG
F.

PS. I am on Sunday only back online.

Well, just spotted this error:

$ ('# myModal') modal ('show'). 

Your code line has many issues, here is a fixed version:

$('#myModal').modal('show');

Regards,
Max

Hi Max,

This is the code that I use all the time:

$('#myModal').modal('show');

Fred

Where did you place the code for the popup itself, inside or outside the tabs area?

Rob

Hi Rob,
momental is apparently the popup only within the tab area on, because when I click a tab, the popup is working correctly.
So the popup must be satisfied outside the tab area.

regards
Fred

I place the code for the modals in a separate container ( type = none) at the beginning of the form, outside the tabs area.

Rob

Hi Rob,
so?
[attachment=0]screen.jpg[/attachment]

This is a rather strange setup, you show the Javascript to call the modal, not the modal itself from a "Holder" container where the script won't be executed. I have no idea why you would want to do that

Here is a short tutorial for the use of Bootstrap Modals.
It is the code for Bootstrap 3.2 Modals, with a Bootstrap 3 Template.
With the Chronoform Bootstrap and the 2.3 from a Template I had to remove modal form Class = "modal fade" , one of the reasons to go all Bootstrap 3.2

Use a Container element set to Custom.
In the start code:

<div id="id_of _the_modal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header"><button class="close" type="button" data-dismiss="modal">×<span class="sr-only">Close</span></button>
       <h4 id="myModalLabel" class="modal-title">Title of the Modal</h4>
     </div><!-- /.modal header -->
     <div class="modal-body">
       <p>

And in the End code

      </p> 
     </div><!-- /.modal body -->
     <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button> 
     </div><!-- /.modal footer -->
    </div><!-- /.model content -->
  </div><!-- /.modal dialog -->
</div><!-- /.Modal -->

Now you can put what you want in the Container and it is shown in the Modal.
The modal is part of the form so the form data array is accessible.

If you want to show the modal with a Buttom:
Put a Button on the form:

Type=Button
Value/Label= Text you want on the Button
Extra params:
data-g-toggle = modal Or data-toggle = modal for Bootstrap templates
data-target = #Id_of_the_Modal

Of call it with javascript
$('#Id_of_the_Modal').modal(options)

Rob

Hi Fred,

Did you manage to solved this following Rob's hints ? if not then did you check the page with FireBug for JS errors ?

Regards,
Max

Hello,

I'm sorry that I now announce myself first again. I was away for some time.
In Firebugs me no error is displayed. It is certainly not a script error, but is surely only because the "Thanks-pop" a problem with the setting of the Joomla plugin "content-page break" when the "Tabs" option is selected in the "presentation".

I have just tested the following constellation:

The normal article content is as follows:

<hr title="" alt="Hotelbeschreibung" class="system-pagebreak" />
<p>Text...</p>
<hr title="" alt="Kontaktdaten" class="system-pagebreak" />
<p>Text...</p>
<hr title="" alt="Buchungszeiten & Preise" class="system-pagebreak" />
<p>Text...</p>
<hr title="" alt="Bestellformular" class="system-pagebreak" />
<p>{chronoforms5}anfrageformular{/chronoforms5}</p>

Under the tab "Bestellformular" is the form.
So I must always first on the tab "Bestellformular" button to get to the form. Now I fill out the form and send it off.
At the same time, the tab "Bestellformular" closed in Joomla article. That makes Joomla automatically. So I'm in the post again in the tab index. The Thanks-popup does not go on here. But it's on again if I click on the tab "Bestellformular".
So but it should not be.

Then I made ​​the following change to the Joomla page for testing purposes:

<p>{chronoforms5}anfrageformular{/chronoforms5}</p>
<hr title="" alt="Hotelbeschreibung" class="system-pagebreak" />
<p>Text...</p>
<hr title="" alt="Kontaktdaten" class="system-pagebreak" />
<p>Text...</p>
<hr title="" alt="Buchungszeiten und Preise" class="system-pagebreak" />
<p>Text...</p>
<hr title="" alt="Bestellformular" class="system-pagebreak" />

The form is now on the side in front of the tabs.
Now so I can fill out the form immediately, because it is not under a tab and a tab must not be selected.
And what can I say, the Thanks-popup works perfectly! It goes on automatically when the form has been sent.

So there is only a problem because the form is under a tab in the post. Only the has not yet been solved.

Best regards
Fred

Hi Fred,

Ok, then its something with the tabs implementation, what tabs script do you use ? please ask the script developer how to activate a specific tab when the page loads, or what's the link to open a tab, if you can have this then you simply set the form to open that link.

Regards,
Max

Hello,
This script works as the ModalBox should work:

jQuery(document).ready(function($){
 alert("Thanks!");
 });

Can I customize these alert boxes with styles so that it looks like a ModalBox?

many greetings
Fred

Hi Fred,

Unfortunately its not possible to customize the browser's alert box.

If you have some modal library loaded on your webpage then you can call it instead of using the alert line, if not then please wait for the next update and we can try something different.

Regards,
Max