{"id":20961719,"url":"https://github.com/heimrichhannot/contao-modal","last_synced_at":"2025-09-09T05:48:31.626Z","repository":{"id":62515511,"uuid":"59095810","full_name":"heimrichhannot/contao-modal","owner":"heimrichhannot","description":"A solid contao modal layer framework.","archived":false,"fork":false,"pushed_at":"2022-02-14T16:14:39.000Z","size":129,"stargazers_count":3,"open_issues_count":3,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-17T07:12:22.361Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heimrichhannot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-18T08:18:05.000Z","updated_at":"2022-08-12T05:44:56.000Z","dependencies_parsed_at":"2022-11-02T13:16:00.981Z","dependency_job_id":null,"html_url":"https://github.com/heimrichhannot/contao-modal","commit_stats":null,"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"purl":"pkg:github/heimrichhannot/contao-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heimrichhannot","download_url":"https://codeload.github.com/heimrichhannot/contao-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274250508,"owners_count":25249396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T02:15:53.303Z","updated_at":"2025-09-09T05:48:31.618Z","avatar_url":"https://github.com/heimrichhannot.png","language":"PHP","readme":"# Modal - A solid contao modal window framework\n\n\u003e This package is abandoned and no longer maintained.\n\nModal provides modal elements within modal archives. It works best together with *'heimrichhannot/contao-teaser'* and its teaser content elements.\n\n## Features\n\n- Url alias support with backlinks (browser history)\n- extendable for other modal frameworks/libraries\n- custom header/footer\n- content elements within modal body\n- inserttags\n- works together with `contao-disclaimer`\n- Bootstrap 3 and 4 support\n- [Contao Components](https://github.com/heimrichhannot/contao-components) support\n\n## Setup \n\nInstall: `composer require heimrichhannot/contao-modal`\n\nWe recommend to disable the not used modal framework component in page layout.\n\n### Insertags\n\n Insert-Tag | Description | Arguments\n ---------- | ----------- | ---------\n`{{modal_url::*::*::*}}` | Returns the modal url (usage: `\u003ca href=\"{{modal_url::1::home}}\"\u003eHier klicken\u003c/a\u003e`) | 1: modal id/alias, 2: jump to page id/alias, 3: auto_item id or alias\n`{{modal_link::*::*::*::*}}` | Returns the modal link | 1: modal id/alias, 2: jump to page id/alias, 3: link text \u0026 title, 4: auto_item id or alias\n`{{modal_link_open::*::*::*}}` | Returns the modal link's opening tag (`\u003ca href=\"{{modal_url::1::home}}\"\u003e`). | 1: modal id/alias, 2: jump to page id/alias, 3: auto_item id or alias\n`{{modal_link_close::*}}` | Returns the modal link's closing tag (`\u003c/a\u003e`) -\u003e Requires associated {{modal_link_open}} tag. | 1: modal id/alias\n \n \n### Hooks\n\nName | Arguments | Expected return value | Description\n ---------- | ---------- | ---------- | ---------\ngenerateModalUrl | $arrRow, $strParams, $strUrl | $strUrl | Modify the modal url.\ngenerateModal | $objTemplate, $objModel, $objConfig, $objModal | void | Modify the modal output.\ngetModalContentElement | $strContent, $objElement, $objTemplate, $objModel, $objConfig, $objModal | $strContent | Modify the modal within content element.\n\n### Register custom modules to make usage of modal\n\nIf you want to register you list modules for example to make usage of the modal framework, you should enable by adding your module to the `$GLOBALS['MODAL_MODULES']`\n\n```\nconfig.php\n/**\n * Modal module configuration\n */\n$GLOBALS['MODAL_MODULES']['mymodule_list'] = array\n(\n\t'invokePalette' =\u003e 'customTpl;', // The modal palette will be invoked after the field customTpl; as example\n);\n```\n\nThan you have to implement the links within you list module. The following example is taken from the newslist implementation within the modal framework:\n\n```\n public function parseArticlesHook(\u0026$objTemplate, $arrArticle, $objModule)\n \t{\n \t\tif (!$objModule-\u003euseModal || $arrArticle['source'] != 'default') {\n \t\t\treturn false;\n \t\t}\n \t\t\n \t\t$objJumpTo = \\PageModel::findPublishedById($objTemplate-\u003earchive-\u003ejumpTo);\n \t\t\n \t\tif ($objJumpTo === null || !$objJumpTo-\u003elinkModal) {\n \t\t\treturn false;\n \t\t}\n \t\t\n \t\t$objModal = ModalModel::findPublishedByIdOrAlias($objJumpTo-\u003emodal);\n \t\t\n \t\tif ($objModal === null) {\n \t\t\treturn false;\n \t\t}\n \t\t\n \t\t$objJumpTo = \\PageModel::findWithDetails($objJumpTo-\u003eid);\n \t\t\n \t\t$arrConfig = ModalController::getModalConfig($objModal-\u003ecurrent(), $objJumpTo-\u003elayout);\n \t\t\n \t\t$blnAjax = true;\n \t\t$blnRedirect = true;\n \t\t\n \t\t$objTemplate-\u003elink         = ModalController::generateModalUrl($arrArticle, $objTemplate-\u003earchive-\u003ejumpTo, $blnAjax, $blnRedirect);\n \t\t$objTemplate-\u003elinkHeadline = ModalController::convertLinkToModalLink($objTemplate-\u003elinkHeadline, $objTemplate-\u003elink, $arrConfig, $blnRedirect);\n \t\t$objTemplate-\u003emore         = ModalController::convertLinkToModalLink($objTemplate-\u003emore, $objTemplate-\u003elink, $arrConfig, $blnRedirect);\n \t}\n```\n\nAs you can see, we attach to the parseArticles HOOK and adjust all links with `ModalController::generateModalUrl()` or `ModalController::convertLinkToModalLink()` functions.\n\n**To access the Reader entities it is necessary to link the redirect page with a modal. Add a new modal first, attach the reader modules as content element and select \"link Modal\" within the redirect page in the site structure and assign the previously created modal to the page.**\n\n \n### Add custom modal framework\n\nTo extend modal with your own framework, you have add the following:\n\n#### Add your own modal config\n\nYou have to register your custom modal within '$GLOBALS['TL_MODALS']'.\n\n```\n// my_module/config/config.php\n\n/**\n * Modal types\n */\n$GLOBALS['TL_MODALS']['my_custom_modal'] = array\n(\n\t'header'   =\u003e true,\n\t'footer'   =\u003e true,\n\t'template' =\u003e 'modal_my_custom_modal',\n\t'link'     =\u003e array(\n\t\t'attributes' =\u003e array(\n\t\t\t'data-toggle' =\u003e 'modal',\n\t\t),\n\t),\n\t'js'       =\u003e array\n\t(\n\t\t'system/modules/my_module/assets/js/jquery.my_custom_modal.js',\n\t),\n);\n```\n\n#### Add your modal template\n\nThe modal template contains the complete markup of your modal framework. Add as much as possible.\n\n```\n// my_module/templates/modals/modal_my_custom_modal.html5\n\n\u003cdiv class=\"modal fade in\" tabindex=\"-1\" role=\"dialog\" data-back=\"\u003c?= $this-\u003eback; ?\u003e\"\u003e\n\t\u003cdiv class=\"modal-dialog\"\u003e\n\t\t\u003cdiv class=\"modal-content\"\u003e\n\t\t\t\u003c?php if ($this-\u003eshowHeader): ?\u003e\n\t\t\t\t\u003cdiv class=\"modal-header\"\u003e\n\t\t\t\t\t\u003c?php if($this-\u003ecustomHeader): ?\u003e\n\t\t\t\t\t\t\u003c?= $this-\u003eheader; ?\u003e\n\t\t\t\t\t\u003c?php elseif($this-\u003eheadline): ?\u003e\n\t\t\t\t\t\t\u003cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"\u003e\u003cspan aria-hidden=\"true\"\u003e\u0026times;\u003c/span\u003e\u003c/button\u003e\n\t\t\t\t\t\t\u003c\u003c?= $this-\u003ehl ?\u003e class=\"modal-title\"\u003e\u003c?= $this-\u003eheadline ?\u003e\u003c/\u003c?= $this-\u003ehl ?\u003e\u003e\n\t\t\t\t\t\u003c?php else :?\u003e\n\t\t\t\t\t\t\u003cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"\u003e\u003cspan aria-hidden=\"true\"\u003e\u0026times;\u003c/span\u003e\u003c/button\u003e\n\t\t\t\t\t\t\u003ch4 class=\"modal-title\"\u003e\u003c?= $this-\u003etitle; ?\u003e\u003c/h4\u003e\n\t\t\t\t\t\u003c?php endif; ?\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c?php endif; ?\u003e\n\t\t\t\u003cdiv class=\"modal-body\"\u003e\n\t\t\t\t\u003c?= $this-\u003ebody; ?\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003c?php if ($this-\u003eshowFooter): ?\u003e\n\t\t\t\t\u003cdiv class=\"modal-footer\"\u003e\n\t\t\t\t\t\u003c?= $this-\u003efooter; ?\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c?php endif; ?\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Add your modal link template\n\nThe modal link template is required by inserttags (e.g {{modal_link::*}} to provide the correct trigger markup. \n\n```\n// my_module/templates/modals/modallink_my_custom_modal.html5\n\u003ca href=\"\u003c?= $this-\u003ehref; ?\u003e\" title=\"\u003c?= $this-\u003elinkTitle; ?\u003e\"\u003c?= $this-\u003etarget; ?\u003e\u003c?= $this-\u003elinkAttributes; ?\u003e\u003e\u003c?= $this-\u003elink; ?\u003e\u003c/a\u003e\n```\n\n#### Add your modal javascript logic\n\nThe modal windows are delivered asynchronous by the ModalController. You have to implement the toggle, close and ajax loading by your own.\n\n```\n// my_module/assets/js/jquery.my_custom_modal.js\n(function ($) {\n\n    var ModalBs3 = {\n        init: function () {\n            this.bindToggle();\n            this.bindClose();\n            $(document).ajaxComplete($.proxy(this.ajaxComplete, this));\n        },\n        ajaxComplete: function () {\n            this.bindClose();\n        },\n        bindToggle: function () {\n            $('[data-toggle=modal]').on('click', function () {\n                var $el = $(this),\n                    url = $el.attr('href');\n\n                if (!url) {\n                    return false;\n                }\n\n                $.ajax({\n                    url: url,\n                    dataType: 'json',\n                    error: function(jqXHR, textStatus, errorThrown) {\n                        if (jqXHR.status == 301) {\n                            location.href = jqXHR.responseJSON.result.data.url;\n                            closeModal(jqXHR.responseJSON, $form);\n                            return;\n                        }\n                    },\n                    success: function (response, textStatus, jqXHR) {\n\n                        if (typeof response == 'undefined') {\n                            return;\n                        }\n\n                        if (response.result.html \u0026\u0026 response.result.data.id) {\n                            var $modal = $(response.result.html);\n                            $('body').find('.modal').remove();\n                            $modal.appendTo('body').modal('show');\n\n                            if(typeof response.result.data.url !== 'undefined')\n                            {\n                                history.pushState(null, null, response.result.data.url);\n                            }\n                        }\n                    }\n                });\n\n                return false;\n\n            });\n        },\n        bindClose: function () {\n            $('.modal').on('hide.bs.modal', function (e) {\n                var $this = $(this);\n\n                // stop embedded videos like youtube\n                $this.find('iframe').each(function () {\n                    var $this = $(this);\n\n                    // reset the src will stop the video\n                    $this.attr('src', $this.attr('src').replace('autoplay=1', 'autoplay=0'));\n                });\n\n                // stop embedded audio/video\n                $this.find('audio, video').each(function () {\n                    this.pause();\n                });\n\n                history.pushState(null, null, $this.data('back'));\n                // window.location.replace($this.data('back'));\n            });\n        }\n    }\n\n    $(function () {\n        ModalBs3.init()\n    });\n\n})(jQuery);\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheimrichhannot%2Fcontao-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-modal/lists"}