手动触发模式，通常在单击链接时触发(Firing a modal manually that normally fires when a link is clicked)

手动触发模式，通常在单击链接时触发(Firing a modal manually that normally fires when a link is clicked)

我正在使用一些JS代码，因为我不是前端开发人员，我有一些问题要弄清楚如何触发JS上的事件，通常在点击链接时触发。

这是链接：

<a href="#modal-text" class="call-modal" title="Clicking this link shows the modal">Demo</a>

拦截该链接点击的JS函数是：

(function (global) { 'use strict'; // Storage variable var modal = {}; // Store for currently active element modal.lastActive = undefined; modal.activeElement = undefined; // Polyfill addEventListener for IE8 (only very basic) modal._addEventListener = function (element, event, callback) { if (element.addEventListener) { element.addEventListener(event, callback, false); } else { element.attachEvent('on' + event, callback); } }; // Hide overlay when ESC is pressed modal._addEventListener(document, 'keyup', function (event) { var hash = window.location.hash.replace('#', ''); // If hash is not set if (hash === '' || hash === '!') { return; } // If key ESC is pressed if (event.keyCode === 27) { window.location.hash = '!'; if (modal.lastActive) { return false; } // Unfocus modal.removeFocus(); } }, false); // Convenience function to trigger event modal._dispatchEvent = function (event, modal) { var eventTigger; if (!document.createEvent) { return; } eventTigger = document.createEvent('Event'); eventTigger.initEvent(event, true, true); eventTigger.customData = { 'modal': modal }; document.dispatchEvent(eventTigger); }; // When showing overlay, prevent background from scrolling modal.mainHandler = function () { var hash = window.location.hash.replace('#', ''); var modalElement = document.getElementById(hash); var htmlClasses = document.documentElement.className; var modalChild; // If the hash element exists if (modalElement) { // Get first element in selected element modalChild = modalElement.children[0]; // When we deal with a modal and body-class `has-overlay` is not set if (modalChild && modalChild.className.match(/modal-inner/) && !htmlClasses.match(/has-overlay/)) { // Set an html class to prevent scrolling //document.documentElement.className += ' has-overlay'; // Mark modal as active modalElement.className += ' is-active'; modal.activeElement = modalElement; // Set the focus to the modal modal.setFocus(hash); // Fire an event modal._dispatchEvent('cssmodal:show', modal.activeElement); } } else { document.documentElement.className = htmlClasses.replace(' has-overlay', ''); // If activeElement is already defined, delete it if (modal.activeElement) { modal.activeElement.className = modal.activeElement.className.replace(' is-active', ''); // Fire an event modal._dispatchEvent('cssmodal:hide', modal.activeElement); // Reset active element modal.activeElement = null; // Unfocus modal.removeFocus(); } } }; modal._addEventListener(window, 'hashchange', modal.mainHandler); modal._addEventListener(window, 'load', modal.mainHandler); /* * Accessibility */ // Focus modal modal.setFocus = function () { if (modal.activeElement) { // Set element with last focus modal.lastActive = document.activeElement; // New focussing modal.activeElement.focus(); } }; // Unfocus modal.removeFocus = function () { if (modal.lastActive) { modal.lastActive.focus(); } }; // Export CSSModal into global space global.CSSModal = modal; }(window));

如何在用户点击链接但在我的页面上手动调用被调用的函数，例如<script>firelightbox(parameters);</script>

Im working with some JS code, since Im not front developer im having some issues to figuring out how to trigger an event on JS that normally fires when a link is clicked.

This is the link:

<a href="#modal-text" class="call-modal" title="Clicking this link shows the modal">Demo</a>

And the JS function that intercept the click on that link is:

(function (global) { 'use strict'; // Storage variable var modal = {}; // Store for currently active element modal.lastActive = undefined; modal.activeElement = undefined; // Polyfill addEventListener for IE8 (only very basic) modal._addEventListener = function (element, event, callback) { if (element.addEventListener) { element.addEventListener(event, callback, false); } else { element.attachEvent('on' + event, callback); } }; // Hide overlay when ESC is pressed modal._addEventListener(document, 'keyup', function (event) { var hash = window.location.hash.replace('#', ''); // If hash is not set if (hash === '' || hash === '!') { return; } // If key ESC is pressed if (event.keyCode === 27) { window.location.hash = '!'; if (modal.lastActive) { return false; } // Unfocus modal.removeFocus(); } }, false); // Convenience function to trigger event modal._dispatchEvent = function (event, modal) { var eventTigger; if (!document.createEvent) { return; } eventTigger = document.createEvent('Event'); eventTigger.initEvent(event, true, true); eventTigger.customData = { 'modal': modal }; document.dispatchEvent(eventTigger); }; // When showing overlay, prevent background from scrolling modal.mainHandler = function () { var hash = window.location.hash.replace('#', ''); var modalElement = document.getElementById(hash); var htmlClasses = document.documentElement.className; var modalChild; // If the hash element exists if (modalElement) { // Get first element in selected element modalChild = modalElement.children[0]; // When we deal with a modal and body-class `has-overlay` is not set if (modalChild && modalChild.className.match(/modal-inner/) && !htmlClasses.match(/has-overlay/)) { // Set an html class to prevent scrolling //document.documentElement.className += ' has-overlay'; // Mark modal as active modalElement.className += ' is-active'; modal.activeElement = modalElement; // Set the focus to the modal modal.setFocus(hash); // Fire an event modal._dispatchEvent('cssmodal:show', modal.activeElement); } } else { document.documentElement.className = htmlClasses.replace(' has-overlay', ''); // If activeElement is already defined, delete it if (modal.activeElement) { modal.activeElement.className = modal.activeElement.className.replace(' is-active', ''); // Fire an event modal._dispatchEvent('cssmodal:hide', modal.activeElement); // Reset active element modal.activeElement = null; // Unfocus modal.removeFocus(); } } }; modal._addEventListener(window, 'hashchange', modal.mainHandler); modal._addEventListener(window, 'load', modal.mainHandler); /* * Accessibility */ // Focus modal modal.setFocus = function () { if (modal.activeElement) { // Set element with last focus modal.lastActive = document.activeElement; // New focussing modal.activeElement.focus(); } }; // Unfocus modal.removeFocus = function () { if (modal.lastActive) { modal.lastActive.focus(); } }; // Export CSSModal into global space global.CSSModal = modal; }(window));

How can i call the function that gets called when the user clicks the link but manually on my page, something like <script>firelightbox(parameters);</script>

最满意答案

使用jQuery可以轻松解决这个问题

$('.selector').click();

但普通的JavaScript也可能为您提供解决方案

让我们给你的锚元素一个Id（为了简单起见）

<a id="anchorToBeClicked" href="#modal-text" class="call-modal" title="Clicking this link shows the modal">Demo</a>

让我们创建一个模拟点击的功能

function simulateClick() { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); var cb = document.getElementById("anchorToBeClicked"); cb.dispatchEvent(evt); }

现在在window.onload上调用此函数

window.onload = function() { simulateClick(); };

编辑：

实际上，您使用的代码不会处理锚标记的实际点击事件，而是依赖于浏览器窗口中Url的哈希更改。 您只需使用即可调用该功能

window.onload = function() { location.hash = '#modal-text' };

Using jQuery will solve this easily

$('.selector').click();

but plain old JavaScript may also have a solution for you

Let's just give your anchor element an Id (to keep things simple)

<a id="anchorToBeClicked" href="#modal-text" class="call-modal" title="Clicking this link shows the modal">Demo</a>

Let's create a function that simulates the click

function simulateClick() { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); var cb = document.getElementById("anchorToBeClicked"); cb.dispatchEvent(evt); }

Now call this function on window.onload

window.onload = function() { simulateClick(); };

EDIT:

Actually, the code you are using is not working on actual click event of the anchor tag, instead it relies on hash change of Url in your browser window. You can simply invoke that functionality by using

window.onload = function() { location.hash = '#modal-text' };