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

Question

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>

The user clicking the link is manually launching it...do you want to run it instantly? — tymeJV, Jun 19 '13 at 14:57
may be this is helpfull http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box — U.P, Jun 19 '13 at 14:58

score 0 · Answer 1 · answered Jun 19 '13 at 15:18

0

If you are using jQuery, you can trigger the clicking of a link on page load using this code:

$(document).ready(function(){
    $('.call-modal').click();
});

answered Jun 19 '13 at 15:18

woemler

7,089
7
48
67

U.P · Accepted Answer · 2013-06-19T16:11:34.960

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

I will like not to simulate a click (hack solution), but acttualy to call the function. Im using plain javascript — DomingoSL, Jun 19 '13 at 15:51

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

2 Answers2