0

我正在使用一些 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>

4

2 回答 2

0

如果您使用的是 jQuery，则可以使用以下代码在页面加载时触发点击链接：

$(document).ready(function(){
    $('.call-modal').click();
});
于 2013-06-19T15:18:15.527 回答
0

使用 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'
};
于 2013-06-19T15:25:42.227 回答