Canvas Support

Modal link using text, no button

6 replies · opened Feb 25, 2020

SSoBuenoFeb 25, 2020

Hello Canvas Team,

I am trying to link to a modal contact form using text instead of a button. When I removed the class="button" from the modal form code the text become unclickable. What code do I use to link text to a modal pop up?

Thanks for the information.

SSemicolon WebSTAFFFeb 26, 2020

Hello,

Any chances you could provide us with the Full Code of the Trigger Element, so that we can provide you with a more proper code. Thanks for your Patience.

You can consider using this:


[Inline Modal](#myModal1)

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSoBuenoFeb 26, 2020

I am using the code from the Contact-5-recaptcha.html

The code I am using is below. I tried adding the code you suggested but was unable to get it to work.


							[Email us to see how we can help you](#)
							[Send an Email](#)

							
								
									
										
											Send Us an Email
											×
										
										

											
												
												

													

													
														Name *
														
													

													
														Email *
														
													

													

													
														Phone
														
													

													
														Services
														
															-- Select One --
															Wordpress
															PHP / MySQL
															HTML5 / CSS3
															Graphic Design
														
													

													

													
														Subject *
														
													

													
														Message *
														
													

													
														
													

													

														
														

													

													
														Send Message
													

													

												

											

										
										
											Close
SSoBuenoFeb 27, 2020

I am also having trouble with landscape mode on idevices. When you switch the phone from portrait to landscape the header text gets cut off. Here is a link to a video showing the error. https://youtu.be/wZk413IdDFk Any suggestions on how to fix this?

SSemicolon WebSTAFFFeb 28, 2020

Hello,

  1. The following code should work fine:

[Email us to see how we can help you](#)
[Send an Email](#)

If you are still facing issues with this, please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate codes. Thanks for your Patience.

  1. This appears to be an error with the VerticalMiddle Functionality on iPhoneX Devices. Please find the following code in the js/functions.js File inside the verticalMiddle: function() Function Block:

if( $body.hasClass('device-sm') || $body.hasClass('device-xs') )

and replace it with:


if( $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs') )

This should fix the issue. Hope this Helps!

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

SSoBuenoMar 3, 2020
  1. Thanks! The code for the text modal link worked but I am now having an issue with the link text. Here is the page I am working with for reference.
    http://www.cultbranding.com/testindex.html

The link is under "Email us to see how we can help you"

I am having an issue with the text color when the link is clicked. The link text goes to black after it is clicked, can I change it so to the link text stays orange after it has been clicked?

  1. The JS code you provided helped with the top part of text not being cut but now it is cutting of the CTA button. I have added a link with a video showing the error. Any thoughts on how to prevent this?

https://youtu.be/FrzSqQ7JfDc

SSemicolon WebSTAFFMar 3, 2020

Hello,

  1. This actually is not an issue as this is the Browser's Default Behavior. When the Modal is opened on Clicking the Link, the focus/active State is applied on the Link which makes it Black (as it is set on Hover). To remove this behavior, simply add the .color Class to the Link as this would disable any Hover State.

  2. It is actually because of the Height of the Slider. Consider setting a Custom Height for this Device Width. Example: Set data-height-md="700" on the #slider Element.

This should definitely work fine. 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