Canvas Support

Incompatibility .data-animate with class="modal

4 replies·opened Feb 28, 2022
M
MaximM777Feb 28, 2022

HI!
This code is from the block-content-pricing-2.html file. To the file Was added animation and modal-content.

<section id="content">
			<div class="content-wrap" style="background-color: #F3F1EA">
				<div class="container clearfix">

					<div class="row justify-content-center">

						<div class="col-xl-6 col-lg-8 text-center mb-5">
							<h3 class="h1 fw-bold mb-3">Choose Your Plan</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias veniam autem voluptate dolores suscipit animi praesentium, cupiditate explicabo dolorem quae unde facilis libero dolorum quam hic tenetur ratione quibusdam est.</p>
						</div>

					</div>

					<div class="row justify-content-center">

						<div class="col-12" data-animate="fadeInLeft">
							<div class="border rounded p-4 mb-4 h-shadow all-ts bg-white h-translatey-sm">
								<div class="row align-items-center col-mb-30">
									<div class="col-lg-3 col-md-6">
										<h3 class="mb-0 fw-semibold font-secondary">Personal</h3>
									</div>
									<div class="col-lg-5 col-md-6">
										<p class="mb-0 text-larger fw-normal">Full Access, 100 User Accounts, 1 Year License, 23/7 Support</p>
									</div>
									<div class="col-lg-2 text-lg-end col-md-6">
										<h3 class="mb-0 font-secondary">$39.99</h3>
									</div>
									<div class="col-lg-2 text-lg-end col-md-6">
										<a href="#" data-bs-toggle="modal" data-original-title="Tooltip" data-bs-target=".bs-example-modal-lg-1" class="btn btn-outline-dark m-0">Subscribe</a>
									</div>

										<div class="modal fade bs-example-modal-lg-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
											<div class="modal-dialog modal-lg">
												<div class="modal-content">
													<div class="modal-header">
														<h4 class="modal-title" id="myModalLabel">Wong Wei</h4>
														<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
													</div>
													<div class="modal-body">
														O policial Wong Wei, vindo de longe, encontra seu tio, um policial sênior, morto em circunstâncias misteriosas. Como as evidências encontradas não só não ajudaram o caso, mas o confundiram ainda mais, Wong decide ir para a prisão para ganhar a confiança dos prisioneiros e encontrar o assassino. No entanto, o caso toma um rumo inesperado e Wong se encontra envolvido no assassinato de um dos carcereiros, pelo qual é condenado à morte. No entanto, quando a sentença estava prestes a ser cumprida, um certo Guardião Tien o convida para se juntar ao seu movimento.
													</div>
												</div>
											</div>
										</div>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
		</section><!-- #content end -->

After clicking on Subscribe - <div class="modal-backdrop fade show"></div> completely blocks the screen.

S
SemiColonWebSTAFFMar 1, 2022

Hello,

The issue is not with the data-animate. Make sure that you are placing your Modal outside, possible directly in the .content-wrap > .container DIV. Example:

<div class="row">
	<div class="col-12" data-animate="fadeInLeft">
		<div class="border rounded p-4 mb-4 h-shadow all-ts bg-white h-translatey-sm">
			<div class="row align-items-center col-mb-30">
				<div class="col-lg-3 col-md-6">
					<h3 class="mb-0 fw-semibold font-secondary">Personal</h3>
				</div>
				<div class="col-lg-5 col-md-6">
					<p class="mb-0 text-larger fw-normal">Full Access, 100 User Accounts, 1 Year License, 23/7 Support</p>
				</div>
				<div class="col-lg-2 text-lg-end col-md-6">
					<h3 class="mb-0 font-secondary">$39.99</h3>
				</div>
				<div class="col-lg-2 text-lg-end col-md-6">
					<a href="#">Subscribe</a>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade bs-example-modal-lg-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Wong Wei</h4>
				<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
			</div>
			<div class="modal-body">
				O policial Wong Wei, vindo de longe, encontra seu tio, um policial sênior, morto em circunstâncias misteriosas. Como as evidências encontradas não só não ajudaram o caso, mas o confundiram ainda mais, Wong decide ir para a prisão para ganhar a confiança dos prisioneiros e encontrar o assassino. No entanto, o caso toma um rumo inesperado e Wong se encontra envolvido no assassinato de um dos carcereiros, pelo qual é condenado à morte. No entanto, quando a sentença estava prestes a ser cumprida, um certo Guardião Tien o convida para se juntar ao seu movimento.
			</div>
		</div>
	</div>
</div>

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.

M
MaximM777Mar 1, 2022

Thank you very much! Your support is great as always!

M
MaximM777Mar 1, 2022

Tell me where can I see the commands for .data-animate, in one of the demos I saw the command data-animate="fadeInUpSmall faster"?

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