手动触发一个通常在点击链接时触发的模态

Firing a modal manually that normally fires when a link is clicked

本文关键字：链接 模态 一个      更新时间：2023-09-26

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

使用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'
};

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

$(document).ready(function(){
    $('.call-modal').click();
});
相关文章：