Как вызвать модальное окно в Visual Composer?

Question

[alashgrand]

Как вызвать из этого плагина модальное окно https://codelights.com/elements/popup/ ссылкой через Visual Composer?
Как вставить ссылку?

Comments

[Орхан Гасанлы]

Здравствуйте!
Не совсем понял, что именно вы хотите сделать... У вас судя по скрину нет Visual Composer. Это скорее всего другой визуальный редактор. Что касается модального окна, то нужно добавить триггер (ID | css селектор). Сделать это средствами popup maker & visual composer не проблема. А с вашими плагинами не знаком(

[alashgrand]

azerphoenix, Здравствуйте! Да я не правильно задал вопрос. в popup makere получается, но все же он не подходит для меня, так как какие-то смещения в позицонированиии, смещение контента при выводе окна.

2. код Codelights плагина:

/**
 * CodeLights: Modal Popup
 */
!function($){
	"use strict";
	var CLPopup = function(container){
		this.$container = $(container);

		this._events = {
			show: this.show.bind(this),
			afterShow: this.afterShow.bind(this),
			hide: this.hide.bind(this),
			preventHide: function(e){
				e.stopPropagation();
			},
			afterHide: this.afterHide.bind(this),
			resize: this.resize.bind(this),
			keypress: function(e){
				if (e.keyCode == 27) this.hide();
			}.bind(this)
		};

		// Event name for triggering CSS transition finish
		this.transitionEndEvent = (navigator.userAgent.search(/webkit/i)>0) ? 'webkitTransitionEnd' : 'transitionend';
		this.isFixed = !$cl.isMobile;

		this.$trigger = this.$container.find('.cl-popup-trigger');
		this.triggerType = this.$trigger.clMod('type');
		if (this.triggerType == 'load'){
			var delay = this.$trigger.data('delay') || 2;
			setTimeout(this.show.bind(this), delay * 1000);
		} else if (this.triggerType == 'selector') {
			var selector = this.$trigger.data('selector');
			if (selector) $cl.$body.on('click', selector, this._events.show);
		} else {
			this.$trigger.on('click', this._events.show);
		}
		this.$wrap = this.$container.find('.cl-popup-wrap')
			.clMod('pos', this.isFixed ? 'fixed' : 'absolute')
			.on('click', this._events.hide);
		this.$box = this.$container.find('.cl-popup-box');
		this.$overlay = this.$container.find('.cl-popup-overlay')
			.clMod('pos', this.isFixed ? 'fixed' : 'absolute')
			.on('click', this._events.hide);
		this.$container.find('.cl-popup-closer, .cl-popup-box-closer').on('click', this._events.hide);
		this.$box.on('click', this._events.preventHide);
		this.size = this.$box.clMod('size');

		this.timer = null;
	};
	CLPopup.prototype = {
		_hasScrollbar: function(){
			return document.documentElement.scrollHeight > document.documentElement.clientHeight;
		},
		_getScrollbarSize: function(){
			if ($cl.scrollbarSize === undefined) {
				var scrollDiv = document.createElement('div');
				scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
				document.body.appendChild(scrollDiv);
				$cl.scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
				document.body.removeChild(scrollDiv);
			}
			return $cl.scrollbarSize;
		},
		show: function(){
			clearTimeout(this.timer);
			this.$overlay.appendTo($cl.$body).show();
			this.$wrap.appendTo($cl.$body).show();
			if (this.size != 'f') {
				this.resize();
			}
			if (this.isFixed) {
				$cl.$html.addClass('cloverlay_fixed');
				// Storing the value for the whole popup visibility session
				this.windowHasScrollbar = this._hasScrollbar();
				if (this.windowHasScrollbar && this._getScrollbarSize()) {
					$cl.$html.css('margin-right', this._getScrollbarSize());
				}
			} else {
				this.$overlay.css({
					height: $cl.$document.height()
				});
				this.$wrap.css('top', $cl.$window.scrollTop());
			}
			$cl.$body.on('keypress', this._events.keypress);
			this.timer = setTimeout(this._events.afterShow, 25);
		},
		afterShow: function(){
			clearTimeout(this.timer);
			this.$overlay.addClass('active');
			this.$box.addClass('active');
			// UpSolution Themes Compatibility
			// TODO Move to themes
			if (window.$us !== undefined && $us.$canvas !== undefined) {
				$us.$canvas.trigger('contentChange');
			}
			$cl.$window.trigger('resize');
			if (this.size != 'f') {
				$cl.$window.on('resize', this._events.resize);
			}
		},
		hide: function(){
			clearTimeout(this.timer);
			if (this.size != 'f') {
				$cl.$window.off('resize', this._events.resize);
			}
			$cl.$body.off('keypress', this._events.keypress);
			this.$box.on(this.transitionEndEvent, this._events.afterHide);
			this.$overlay.removeClass('active');
			this.$box.removeClass('active');
			// Closing it anyway
			this.timer = setTimeout(this._events.afterHide, 1000);
		},
		afterHide: function(){
			clearTimeout(this.timer);
			this.$box.off(this.transitionEndEvent, this._events.afterHide);
			this.$overlay.appendTo(this.$container).hide();
			this.$wrap.appendTo(this.$container).hide();
			if (this.isFixed) {
				$cl.$html.removeClass('cloverlay_fixed');
				if (this.windowHasScrollbar) $cl.$html.css('margin-right', '');
				// To properly resize 3-rd party elements
				$cl.$window.trigger('resize');
			}
		},
		resize: function(){
			var animation = this.$box.clMod('animation'),
				padding = parseInt(this.$box.css('padding-top')),
				winHeight = $cl.$window.height(),
				popupHeight = this.$box.height();
			if (!this.isFixed) {
				this.$overlay.css('height', $cl.$document.height());
			}
			this.$box.css('top', Math.max(0, (winHeight - popupHeight) / 2 - padding));
		}
	};
	if (window.$cl === undefined) window.$cl = {};
	if ($cl.elements === undefined) $cl.elements = {};
	$cl.elements['cl-popup'] = CLPopup;
	if ($cl.maybeInit !== undefined) $cl.maybeInit();
}(jQuery);

не могу найти ID или класс для использования в URL? инспектор Google Chrome выводит
href="javascript:void(0)"
ссылку