README

Modal提供了模态存档中的模态元素。它与'heimrichhannot/contao-teaser'及其广告内容元素配合使用效果最佳。

特性

支持带反向链接的URL别名（浏览器历史记录）
可扩展用于其他模态框架/库
自定义头部/底部
模态主体内的内容元素
插入标记
与contao-disclaimer配合使用
支持Bootstrap 3和4
Contao Components支持

设置

安装：composer require heimrichhannot/contao-modal

我们建议在页面布局中禁用未使用的模态框架组件。

插入标记

钩子

注册自定义模块以使用模态

如果您想注册列表模块以使用模态框架，您应该通过将您的模块添加到$GLOBALS['MODAL_MODULES']来启用它

config.php
/**
 * Modal module configuration
 */
$GLOBALS['MODAL_MODULES']['mymodule_list'] = array
(
	'invokePalette' => 'customTpl;', // The modal palette will be invoked after the field customTpl; as example
);

然后您必须在列表模块中实现链接。以下示例取自模态框架中的新闻列表实现

 public function parseArticlesHook(&$objTemplate, $arrArticle, $objModule)
 	{
 		if (!$objModule->useModal || $arrArticle['source'] != 'default') {
 			return false;
 		}
 		
 		$objJumpTo = \PageModel::findPublishedById($objTemplate->archive->jumpTo);
 		
 		if ($objJumpTo === null || !$objJumpTo->linkModal) {
 			return false;
 		}
 		
 		$objModal = ModalModel::findPublishedByIdOrAlias($objJumpTo->modal);
 		
 		if ($objModal === null) {
 			return false;
 		}
 		
 		$objJumpTo = \PageModel::findWithDetails($objJumpTo->id);
 		
 		$arrConfig = ModalController::getModalConfig($objModal->current(), $objJumpTo->layout);
 		
 		$blnAjax = true;
 		$blnRedirect = true;
 		
 		$objTemplate->link         = ModalController::generateModalUrl($arrArticle, $objTemplate->archive->jumpTo, $blnAjax, $blnRedirect);
 		$objTemplate->linkHeadline = ModalController::convertLinkToModalLink($objTemplate->linkHeadline, $objTemplate->link, $arrConfig, $blnRedirect);
 		$objTemplate->more         = ModalController::convertLinkToModalLink($objTemplate->more, $objTemplate->link, $arrConfig, $blnRedirect);
 	}

如您所见，我们附加到parseArticles钩子，并通过ModalController::generateModalUrl()或ModalController::convertLinkToModalLink()函数调整所有链接。

要访问读取实体，必须将重定向页面与模态链接。首先添加一个新的模态，将读取模块作为内容元素附加，然后在网站结构中的重定向页面选择“链接模态”，并将之前创建的模态分配给页面。

添加自定义模态框架

要扩展模态以使用自己的框架，您需要添加以下内容

添加您的自定义模态配置

您必须将自定义模态注册在'$GLOBALS['TL_MODALS']'中。

// my_module/config/config.php

/**
 * Modal types
 */
$GLOBALS['TL_MODALS']['my_custom_modal'] = array
(
	'header'   => true,
	'footer'   => true,
	'template' => 'modal_my_custom_modal',
	'link'     => array(
		'attributes' => array(
			'data-toggle' => 'modal',
		),
	),
	'js'       => array
	(
		'system/modules/my_module/assets/js/jquery.my_custom_modal.js',
	),
);

添加您的模态模板

模态模板包含您模态框架的完整标记。尽可能添加。

// my_module/templates/modals/modal_my_custom_modal.html5

<div class="modal fade in" tabindex="-1" role="dialog" data-back="<?= $this->back; ?>">
	<div class="modal-dialog">
		<div class="modal-content">
			<?php if ($this->showHeader): ?>
				<div class="modal-header">
					<?php if($this->customHeader): ?>
						<?= $this->header; ?>
					<?php elseif($this->headline): ?>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<<?= $this->hl ?> class="modal-title"><?= $this->headline ?></<?= $this->hl ?>>
					<?php else :?>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title"><?= $this->title; ?></h4>
					<?php endif; ?>
				</div>
			<?php endif; ?>
			<div class="modal-body">
				<?= $this->body; ?>
			</div>
			<?php if ($this->showFooter): ?>
				<div class="modal-footer">
					<?= $this->footer; ?>
				</div>
			<?php endif; ?>
		</div>
	</div>
</div>

添加您的模态链接模板

模态链接模板是插入标记所必需的（例如 {{modal_link::*}} 提供正确的触发标记）。

// my_module/templates/modals/modallink_my_custom_modal.html5
<a href="<?= $this->href; ?>" title="<?= $this->linkTitle; ?>"<?= $this->target; ?><?= $this->linkAttributes; ?>><?= $this->link; ?></a>

添加您的模态JavaScript逻辑

模态窗口由ModalController异步交付。您必须自行实现切换、关闭和AJAX加载。

// my_module/assets/js/jquery.my_custom_modal.js
(function ($) {

    var ModalBs3 = {
        init: function () {
            this.bindToggle();
            this.bindClose();
            $(document).ajaxComplete($.proxy(this.ajaxComplete, this));
        },
        ajaxComplete: function () {
            this.bindClose();
        },
        bindToggle: function () {
            $('[data-toggle=modal]').on('click', function () {
                var $el = $(this),
                    url = $el.attr('href');

                if (!url) {
                    return false;
                }

                $.ajax({
                    url: url,
                    dataType: 'json',
                    error: function(jqXHR, textStatus, errorThrown) {
                        if (jqXHR.status == 301) {
                            location.href = jqXHR.responseJSON.result.data.url;
                            closeModal(jqXHR.responseJSON, $form);
                            return;
                        }
                    },
                    success: function (response, textStatus, jqXHR) {

                        if (typeof response == 'undefined') {
                            return;
                        }

                        if (response.result.html && response.result.data.id) {
                            var $modal = $(response.result.html);
                            $('body').find('.modal').remove();
                            $modal.appendTo('body').modal('show');

                            if(typeof response.result.data.url !== 'undefined')
                            {
                                history.pushState(null, null, response.result.data.url);
                            }
                        }
                    }
                });

                return false;

            });
        },
        bindClose: function () {
            $('.modal').on('hide.bs.modal', function (e) {
                var $this = $(this);

                // stop embedded videos like youtube
                $this.find('iframe').each(function () {
                    var $this = $(this);

                    // reset the src will stop the video
                    $this.attr('src', $this.attr('src').replace('autoplay=1', 'autoplay=0'));
                });

                // stop embedded audio/video
                $this.find('audio, video').each(function () {
                    this.pause();
                });

                history.pushState(null, null, $this.data('back'));
                // window.location.replace($this.data('back'));
            });
        }
    }

    $(function () {
        ModalBs3.init()
    });

})(jQuery);

heimrichhannot / contao-modal

维护者

详细信息