Canvas Support

iframe within "Large Modal"

6 replies · opened Dec 22, 2019

Aanke30Dec 22, 2019

Hello Team,
I'd like to use your "Large Modal" Box with an iframe link in it.
How can I do this?

Aanke30Dec 22, 2019

this is the live URL with my form:
http://www.keineart.de/1index.html

I want to replace the "myModal" box with the "Large Modal" Box from your files "Modal popovers" cause this box is more suitable, as this box resizes according to the screen size.
So I want the Large Modal Box to be opened, when click on the word "Datenschutzerklärung" and within the box I want to have the text of the file: "http://www.keineart.de/include/dat.htm"
I think this must be done with iframe and I tried many things but didn't get the result I need.

So could you please tell me how must I change this code ?

<div class="col-12">
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Default value" required id="gridCheck">
<small id="emailHelp" class="form-text text-muted">Ich stimme der Kontaktaufnahme und der Übermittlung des Angebots per Email oder Telefon zu und habe die Datenschutzerklärung zur Kenntnis genommen.</small>

<div class="modal1 mfp-hide" id="myModal1">
<div class="block divcenter" style="background-color: #FFF; max-width: 300px;">
<div class="center clearfix" style="padding: 30px;">
<iframe src="http://www.keineart.de/include/dat.htm" width="260" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</div>
</div>
</div>
</div>
</div>
</div>

Thank you for helping !

SSemicolon WebSTAFFDec 23, 2019

Hello,

This is Definitely Possible! However, we recommend using loading the Text inside the Modal via AJAX instead of iFrame. This would make it look more integrated. Consider using the following code for the Modal: 


Large modal

	
		
			
				
					Modal Heading
					&times;

And then add the following JS Code at the bottom of the Page after the js/functions.js JS Linking: 


	jQuery(function() {
		jQuery( "#modal-text-ajax" ).load( "include/dat.htm" );
	});

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aanke30Dec 24, 2019

Thank you !
But as I wrote:
"So I want the Large Modal Box to be opened, when click on the word “Datenschutzerklärung” ..."

Is this possible? So I don't want a button, but a word of my text underneath the form. This word should be like a link, so that the user knows, he can click on the word to open the information.

So how can I add the code here, for the word “Datenschutzerklärung”:
<small id=”emailHelp” class=”form-text text-muted”>Ich stimme der Kontaktaufnahme und der Übermittlung des Angebots per Email oder Telefon zu und habe die Datenschutzerklärung zur Kenntnis genommen.</small>

Thank you and have a beautiful christmas !

SSemicolon WebSTAFFDec 24, 2019

Hello,

Yes, absolutely possible. The Modal Triggers can be as Links or Buttons. Simply use the following code: 

[Datenschutzerklärung](#)

This will definitely work fine. Complete setup instructions can be found here: https://getbootstrap.com/docs/4.4/components/modal/ . Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Merry Christmas! :)

SSemicolon WebSTAFFDec 24, 2019

Hello,

Using this method, you can only open a Local File and not URLs. As it would would be blocked by CORs. So please make sure that the File is on the Same Domain: http://www.keineart.de/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard