مدال ها

مدال ساده

مدال در استک به راحتی قابل تنظیم و راه اندازی از هر عنصری در صفحه است. در ابتدایی ترین کاربرد آنها، یک عنصر با کلاس .modal-trigEN داخل همان .modal-instance باعث ظاهر شدن مدال می شود.

<div class="modal-instance">
	<a class="btn modal-trigger" href="#">
		<span class="btn__text">
			TRIGGER MODAL
		</span>
	</a>
	<div class="modal-container">
		<div class="modal-content">
			MODAL CONTENT HERE
		</div>
	</div>
</div><!--end of modal instance-->
					

نمایش خودکار مدال

مدال می تواند پس از مدتی پس از بارگیری صفحه با افزودن به طور خودکار فعال شود data-autoshow="" به عنصر .modal-container. ویژگی به یک مقدار عددی بر حسب میلی ثانیه نیاز دارد، یعنی. مقدار 1000 مودال را 1 ثانیه پس از بارگیری صفحه نشان می دهد.

<div class="modal-container" data-autoshow="1000">
	<div class="modal-content">
		MODAL CONTENT HERE
	</div>
</div>
					

مدال با کوکی

افزودن ویژگی کوکی داده به هر ظرف مودال، مدال را به حالت یکبار مصرف تبدیل می کند. وقتی مودال کنار گذاشته می‌شود، یک کوکی مرورگر تنظیم می‌شود و مودال برای همیشه کنار گذاشته می‌شود. هر گونه بازدید از صفحه در آینده، مودال را نشان نخواهد داد. کوکی حالت‌های نشان‌داده‌شده از طریق تریگرها و از طریق نمایش خودکار را سرکوب می‌کند. متن تنظیم شده در حالت «کوکی داده» به عنوان نام کوکی استفاده خواهد شد.

روش یکبار مصرف برای هشدار دادن به کاربران در مورد پیامی که می‌توانند با آن «قبول» یا «موافق» کنند، مانند اطلاعیه قانون کوکی‌های اتحادیه اروپا، تبلیغات/فروش یا پیشنهاد ثبت‌نام در خبرنامه مفید است.

این قابلیت به اشتراک گذاشته شده است نوتیفیکیشن ها.

<div class="modal-container" data-cookie="dismissed-demo-modal">
	<div class="modal-content">
		MODAL CONTENT HERE
	</div>
</div>
					

مدال خروج

هنگامی که ماوس او عنصر خاصی را در صفحه می گذارد، می توان از مدال های "خروج" برای جلب توجه کاربر به تبلیغات یا هر هشدار دیگری استفاده کرد. مدال های خروج از ویژگی نمایش داده در هنگام خروج برای تنظیم یک انتخابگر مطابق با عنصری که ماوس کاربر باید از آنجا خارج شود تا حالت مدال را نشان دهد. این به این معنی است که می‌توانید این انتخابگر را طوری تنظیم کنید که با دکمه «تاریخ تحویل»، بدنه صفحه یا حتی یک بخش در صفحه شما مطابقت داشته باشد تا زمانی که کاربر از آن عبور می‌کند، مدال نشان داده شود. همچنین می‌توانید از یک حالت خروج برای جلب توجه مجدد به صفحه زمانی که ماوس کاربر از پنجره مرورگر خارج می‌شود استفاده کنید.

<div class="modal-container" data-show-on-exit=".element-to-exit">
	<div class="modal-content">
		MODAL CONTENT HERE
	</div>
</div>