We Keep Coding

Function in external javascript file called only on reload In react js

I have a external js file linked to my html and bundle.js file generated by webpack linked to html .
In index.html code is
<script src="js/main.js"></script>
<script type="text/javascript" src="bundle.min.js"></script>`
The issue is functions in main.js are called only once on page load in reactjs after running webpack and code is bundled.
main.js file code is
(function () {
'use strict';
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
var mobileMenuOutsideClick = function() {
$(document).click(function (e) {
var container = $("#fh5co-offcanvas, .js-fh5co-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ( $('body').hasClass('offcanvas') ) {
$('body').removeClass('offcanvas');
$('.js-fh5co-nav-toggle').removeClass('active');
}
}
});
};
var offcanvasMenu = function() {
$('#page').prepend('<div id="fh5co-offcanvas" />');
$('#page').prepend('<i></i>');
var clone1 = $('.menu-1 > ul').clone();
$('#fh5co-offcanvas').append(clone1);
var clone2 = $('.menu-2 > ul').clone();
$('#fh5co-offcanvas').append(clone2);
$('#fh5co-offcanvas .has-dropdown').addClass('offcanvas-has-dropdown');
$('#fh5co-offcanvas')
.find('li')
.removeClass('has-dropdown');
// Hover dropdown menu on mobile
$('.offcanvas-has-dropdown').mouseenter(function(){
var $this = $(this);
$this
.addClass('active')
.find('ul')
.slideDown(500, 'easeOutExpo');
}).mouseleave(function(){
var $this = $(this);
$this
.removeClass('active')
.find('ul')
.slideUp(500, 'easeOutExpo');
});
$(window).resize(function(){
if ( $('body').hasClass('offcanvas') ) {
$('body').removeClass('offcanvas');
$('.js-fh5co-nav-toggle').removeClass('active');
}
});
};
var burgerMenu = function() {
$('body').on('click', '.js-fh5co-nav-toggle', function(event){
var $this = $(this);
if ( $('body').hasClass('overflow offcanvas') ) {
$('body').removeClass('overflow offcanvas');
} else {
$('body').addClass('overflow offcanvas');
}
$this.toggleClass('active');
event.preventDefault();
});
};
var fullHeight = function() {
if ( !isMobile.any() ) {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function(){
$('.js-fullheight').css('height', $(window).height());
});
}
};
var contentWayPoint = function() {
var i = 0;
$('.animate-box').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated-fast') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .animate-box.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
var effect = el.data('animate-effect');
if ( effect === 'fadeIn') {
el.addClass('fadeIn animated-fast');
} else if ( effect === 'fadeInLeft') {
el.addClass('fadeInLeft animated-fast');
} else if ( effect === 'fadeInRight') {
el.addClass('fadeInRight animated-fast');
} else {
el.addClass('fadeInUp animated-fast');
}
el.removeClass('item-animate');
}, k * 200, 'easeInOutExpo' );
});
}, 100);
}
} , { offset: '85%' } );
};
var dropdown = function() {
$('.has-dropdown').mouseenter(function(){
var $this = $(this);
$this
.find('.dropdown')
.css('display', 'block')
.addClass('animated-fast fadeInUpMenu');
}).mouseleave(function(){
var $this = $(this);
$this
.find('.dropdown')
.css('display', 'none')
.removeClass('animated-fast fadeInUpMenu');
});
};
var goToTop = function() {
$('.js-gotop').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $('html').offset().top
}, 500, 'easeInOutExpo');
return false;
});
$(window).scroll(function(){
var $win = $(window);
if ($win.scrollTop() > 200) {
$('.js-top').addClass('active');
} else {
$('.js-top').removeClass('active');
}
});
};
// Loading page
var loaderPage = function() {
$(".fh5co-loader").fadeOut("slow");
};
var counter = function() {
$('.js-counter').countTo({
formatter: function (value, options) {
return value.toFixed(options.decimals);
},
});
};
var counterWayPoint = function() {
if ($('#fh5co-counter').length > 0 ) {
$('#fh5co-counter').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout( counter , 400);
$(this.element).addClass('animated');
}
} , { offset: '90%' } );
}
};
var parallax = function() {
if ( !isMobile.any() ) {
$(window).stellar({
horizontalScrolling: false,
hideDistantElements: false,
responsive: true
});
}
};
var testimonialCarousel = function(){
var owl = $('.owl-carousel-fullwidth');
owl.owlCarousel({
items: 1,
loop: true,
margin: 0,
nav: false,
dots: true,
smartSpeed: 800,
autoHeight: true
});
};
var sliderMain = function() {
$('#fh5co-hero .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000,
directionNav: true,
start: function(){
setTimeout(function(){
$('.slider-text').removeClass('animated fadeInUp');
$('.flex-active-slide').find('.slider-text').addClass('animated fadeInUp');
}, 500);
},
before: function(){
setTimeout(function(){
$('.slider-text').removeClass('animated fadeInUp');
$('.flex-active-slide').find('.slider-text').addClass('animated fadeInUp');
}, 500);
}
});
$('#fh5co-hero .flexslider .slides > li').css('height', $(window).height());
$(window).resize(function(){
$('#fh5co-hero .flexslider .slides > li').css('height', $(window).height());
});
};
$(function(){
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
contentWayPoint();
sliderMain();
dropdown();
goToTop();
loaderPage();
counterWayPoint();
counter();
parallax();
testimonialCarousel();
fullHeight();
});
}());
I want my code in main.js called always not only on reload. I am using reactjs and webpack.
Please help me fix this. Thank you.

Please note that you your code in main.js is wrapped in something like this:
(function () {
...
}());
Above construction is called Immediately-Invoked Function Expression (IIFE) - it makes code inside to be called immediately and because everything defined inside any function is visible only in this function (is not visible outside function scope) it also helps to not pollute global context. You can read more about it here.
If you want to have possibility to call it anytime you need you should use normal function (not IIFE):
function mainFunction() {
//your codde
}
and then you can call it anytime you need (also on page load).

How to stop animation after navigating back again to the same page in jquery?

I am making an app on visual studio 2012. I am navigating from home page to levelOne. On a button click on level one i'm doing some animation,during animation if i get back to home page using windows back button, and then again come back to level one i get the animation running ,i want this animation to get stopped.
This is my first page where the animation will occur:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/levelOne/levelOne.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function initiazlize(element, options) {
document.getElementById("play").addEventListener("click",function initial(){
roundCount++;
if (flag1 == false) {
//if flag1 is false that means its time for next storyboard
j = 0;
var r3 = Math.random();
if (r3 <= 0.333) {
$(Left).animate({ marginTop: '-=100px' }, 500);
$(Left).animate({ marginTop: '+=100px' }, 500, animateAsync);
//document.getElementById("play").disabled = false;
}
else if (r3 <= 0.666) {
$(midle).animate({ marginTop: '-=100px' }, 500);
$(midle).animate({ marginTop: '+=100px' }, 500, animateAsync);
//document.getElementById("play").disabled = false;
}
else {
$("#bowlThree").animate({ marginTop: '-=100px' }, 500);
$("#bowlThree").animate({ marginTop: '+=100px' }, 500, animateAsync);
//document.getElementById("play").disabled = false;
}
//inside animate Async(), some more animation on capOne,capTwo,capThree and on object, I want to stop animation on these
//There is a counter j, when j reachs 100 animation is stopped
}
});
document.onbeforeunload = function () {
j = 100;
flag1 = true;
$("#capOne").stop(true, false);
$("#capTwo").stop(true, false);
$("#capThree").stop(true, false);
clearTimeout(variableTimer);
window.cancelAnimationFrame(variableTimer);
Debug;
};
},
unload: function () {
// TODO: Respond to navigations away from this page.
$("#capOne").stop();
$("#capOne").css({ "margin-top": "360px", "margin-left": "250px" })
$("#capTwo").css({ "margin-top": "360px", "margin-left": "580px" })
$("#capThree").css({ "margin-top": "360px", "margin-left": "910px" })
////return false;
$("#capOne").fadeOut(100);
WinJS.UI.disableAnimations();
flag1 = true;//if flag1=false then animation is stopped
$("#capOne").stop(true, false);
$("#capTwo").stop(true, false);
$("#capThree").stop(true, false);
clearTimeout(document.variableTimer);
window.cancelAnimationFrame(document.variableTimer);
debugger;
},
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in viewState.
}
});
})();
Here is the navigator.js file
(function () {
"use strict";
var appView = Windows.UI.ViewManagement.ApplicationView;
var nav = WinJS.Navigation;
WinJS.Namespace.define("Application", {
PageControlNavigator: WinJS.Class.define(
// Define the constructor function for the PageControlNavigator.
function PageControlNavigator(element, options) {
this._element = element || document.createElement("div");
this._element.appendChild(this._createPageElement());
this.home = options.home;
this._lastViewstate = appView.value;
nav.onnavigated = this._navigated.bind(this);
window.onresize = this._resized.bind(this);
document.body.onkeyup = this._keyupHandler.bind(this);
document.body.onkeypress = this._keypressHandler.bind(this);
document.body.onmspointerup = this._mspointerupHandler.bind(this);
Application.navigator = this;
}, {
home: "",
/// <field domElement="true" />
_element: null,
_lastNavigationPromise: WinJS.Promise.as(),
_lastViewstate: 0,
// This is the currently loaded Page object.
pageControl: {
get: function () { return this.pageElement && this.pageElement.winControl; }
},
// This is the root element of the current page.
pageElement: {
get: function () { return this._element.firstElementChild; }
},
// Creates a container for a new page to be loaded into.
_createPageElement: function () {
var element = document.createElement("div");
element.style.width = "100%";
element.style.height = "100%";
return element;
},
// Retrieves a list of animation elements for the current page.
// If the page does not define a list, animate the entire page.
_getAnimationElements: function () { //IHDAr
if (this.pageControl && this.pageControl.getAnimationElements) {
return this.pageControl.getAnimationElements();
}
return this.pageElement;
},
// Navigates back whenever the backspace key is pressed and
// not captured by an input field.
_keypressHandler: function (args) {
if (args.key === "Backspace") {
nav.back();
}
},
// Navigates back or forward when alt + left or alt + right
// key combinations are pressed.
_keyupHandler: function (args) {
if ((args.key === "Left" && args.altKey) || (args.key === "BrowserBack")) {
nav.back();
} else if ((args.key === "Right" && args.altKey) || (args.key === "BrowserForward")) {
nav.forward();
}
},
// This function responds to clicks to enable navigation using
// back and forward mouse buttons.
_mspointerupHandler: function (args) {
if (args.button === 3) {
nav.back();
} else if (args.button === 4) {
nav.forward();
}
},
// Responds to navigation by adding new pages to the DOM.
_navigated: function (args) {
var newElement = this._createPageElement();
var parentedComplete;
var parented = new WinJS.Promise(function (c) { parentedComplete = c; });
this._lastNavigationPromise.cancel();
this._lastNavigationPromise = WinJS.Promise.timeout().then(function () {
return WinJS.UI.Pages.render(args.detail.location, newElement,args.detail.state, parented);
}).then(function parentElement(control) {
var oldElement = this.pageElement;
if (oldElement.winControl && oldElement.winControl.unload) {
oldElement.winControl.unload();
}
this._element.appendChild(newElement);
this._element.removeChild(oldElement);
oldElement.innerText = "";
this._updateBackButton();
parentedComplete();
var history = args.detail.state;
WinJS.UI.Animation.enterPage(this._getAnimationElements()).done(
function () {
}
);//IDHAR
}.bind(this));
args.detail.setPromise(this._lastNavigationPromise);//IDHAR BHI
},
// Responds to resize events and call the updateLayout function
// on the currently loaded page.
_resized: function (args) {
if (this.pageControl && this.pageControl.updateLayout) {
this.pageControl.updateLayout.call(this.pageControl, this.pageElement, appView.value, this._lastViewstate);
}
this._lastViewstate = appView.value;
},
// Updates the back button state. Called after navigation has
// completed.
_updateBackButton: function () {
var backButton = this.pageElement.querySelector("header[role=banner] .win-backbutton");
if (backButton) {
backButton.onclick = function () { nav.back(); };
if (nav.canGoBack) {
backButton.removeAttribute("disabled");
} else {
backButton.setAttribute("disabled", "disabled");
}
}
},
}
)
});
})();

Why callback functions are firing on page load : jQuery Plugins development

I am trying to make a jquery modal plugin and can't understand why my callback functions are firing on page load? I need to fire two functions beforeStart before opening popup window and afterComplete after popup window opens not when page loads but all it occurs on page load. What's wrong with code. I googled whole day still can't get it. this stackoverflow also doesn't works for me.
Here is my code
<script>
$(document).ready(function (e) {
$(".selector").coolBox({
OverlayClose: false,
complete : function(){//this should called when my plugin finished its work
console.log("complete");
},
beforeStart: function(){
console.log("before Start");
}
});
})
</script>
Edit: Here is full plugin code
;(function ($, window) {
$.coolBox = function (options) {
}
$.coolBox.closeCoolBox = function () {
console.log("closeCoolBox closes");
$("#clBoxOverlay,#clBoxOuterWrapper").remove();
};
$.coolBox.openCoolBox = function (options) {
console.log("closeCoolBox opens");
$("#inlineOverlayCloseDisabled").trigger("click");
//$.fn.coolBox(options);
$(this).each(function () {
console.log($(this));
})
};
$.fn.coolBox = function (options) {
console.log("calls to opens");
var settings = {
complete: false,
beforeStart: false,
Background: "#333",
Opacity: "0.8",
Padding: "10px",
Height: "auto",
Width: "auto",
OverlayClose: true,
EscClose: true,
Zindex: "99991",
Border: "2px",
BorderColor: "black",
PopUp: "fixed"
};
var o = {};
$.extend(o, settings, options);
//is this not for event handling before starting my plugin to change DOM?
if (typeof o.beforeStart == 'function') {
o.beforeStart.call(this); // brings the scope to the callback
}
return this.each(function () {
var link = $(this);
link.click(function (event) {
var clBox = document.createElement('div');
clBox.setAttribute("id", "clBoxWrapper");
document.body.appendChild(clBox);
$clBoxWrapper = $("#clBoxWrapper");
$clBoxWrapper.wrap($("<div id='clBoxOuterWrapper'></div>"));
oBox = document.getElementById("clBoxOuterWrapper");
oBox.style.width = o.Width;
oBox.style.height = o.Height;
if (o.PopUp == "fixed") {
oBox.style.position = "fixed";
} else {
oBox.style.position = "absolute";
}
oBox.style.zIndex = o.Zindex + 1;
var olBox = document.createElement('div');
olBox.setAttribute("id", "clBoxOverlay");
olBox.style.width = "100%";
olBox.style.height = "100%";
olBox.style.position = "fixed";
olBox.style.zIndex = o.Zindex;
olBox.style.opacity = o.Opacity;
olBox.style.backgroundColor = o.Background;
olBox.style.top = "0px";
olBox.style.left = "0px";
document.body.appendChild(olBox);
$wrapContent = link.attr("href");
//alert($wrapContent);
if ($wrapContent.indexOf("#") == 0) {
$wrapContainer = $($wrapContent).html();
//alert($wrapContainer);
$oBoxWrapper = $("#clBoxOuterWrapper");
$clBoxOverlay = $("#clBoxOverlay");
$clBoxOverlay.css({
"height": $(document).innerHeight(),
"width": $(document).innerWidth(),
});
if ($oBoxWrapper.length) {
$clBoxWrapper.html($wrapContainer);
if (o.PopUp == "fixed") {
$oBoxWrapper.css({"maxHeight": $(window).height()});
if ($oBoxWrapper.innerHeight() >= $(window).height()) {
$oBoxWrapper.css("overflowY", "scroll");
}
if ($oBoxWrapper.innerWidth() >= $(window).width()) {
$oBoxWrapper.css("overflowX", "scroll");
}
}
$oBoxWrapper.css({
"left": ($(window).width() - $oBoxWrapper.innerWidth()) / 2,
"top": ($(window).height() - $oBoxWrapper.innerHeight()) / 2
});
}
}
event.preventDefault();
});
//is this not event handling code after my plugin finished it task?
if (typeof o.complete == 'function') {
o.complete.call(this); // brings the scope to the callback
}
});
}
})(jQuery, window)
It shows me the information in image when page loads but when i click on my selector link it does not fires my callback functions.

If you want to fire complete callback function when the click event is fired, just move the call inside:
;(function ($, window) {
$.fn.coolBox = function (options) {
console.log("calls to opens");
var settings = {
complete: false,
beforeStart: false,
Background: "#333",
Opacity: "0.8",
Padding: "10px",
Height: "auto",
Width: "auto",
OverlayClose: true,
EscClose: true,
Zindex: "99991",
Border: "2px",
BorderColor: "black",
PopUp: "fixed"
};
var o = {};
$.extend(o, settings, options);
//is this not for event handling before starting my plugin to change DOM?
if (typeof o.beforeStart == 'function') {
o.beforeStart.call(this); // brings the scope to the callback
}
return this.each(function () {
var link = $(this);
link.click(function (event) {
var clBox = document.createElement('div');
clBox.setAttribute("id", "clBoxWrapper");
document.body.appendChild(clBox);
$clBoxWrapper = $("#clBoxWrapper");
$clBoxWrapper.wrap($("<div id='clBoxOuterWrapper'></div>"));
oBox = document.getElementById("clBoxOuterWrapper");
oBox.style.width = o.Width;
oBox.style.height = o.Height;
if (o.PopUp == "fixed") {
oBox.style.position = "fixed";
} else {
oBox.style.position = "absolute";
}
oBox.style.zIndex = o.Zindex + 1;
var olBox = document.createElement('div');
olBox.setAttribute("id", "clBoxOverlay");
olBox.style.width = "100%";
olBox.style.height = "100%";
olBox.style.position = "fixed";
olBox.style.zIndex = o.Zindex;
olBox.style.opacity = o.Opacity;
olBox.style.backgroundColor = o.Background;
olBox.style.top = "0px";
olBox.style.left = "0px";
document.body.appendChild(olBox);
$wrapContent = link.attr("href");
//alert($wrapContent);
if ($wrapContent.indexOf("#") == 0) {
$wrapContainer = $($wrapContent).html();
//alert($wrapContainer);
$oBoxWrapper = $("#clBoxOuterWrapper");
$clBoxOverlay = $("#clBoxOverlay");
$clBoxOverlay.css({
"height": $(document).innerHeight(),
"width": $(document).innerWidth(),
});
if ($oBoxWrapper.length) {
$clBoxWrapper.html($wrapContainer);
if (o.PopUp == "fixed") {
$oBoxWrapper.css({"maxHeight": $(window).height()});
if ($oBoxWrapper.innerHeight() >= $(window).height()) {
$oBoxWrapper.css("overflowY", "scroll");
}
if ($oBoxWrapper.innerWidth() >= $(window).width()) {
$oBoxWrapper.css("overflowX", "scroll");
}
}
$oBoxWrapper.css({
"left": ($(window).width() - $oBoxWrapper.innerWidth()) / 2,
"top": ($(window).height() - $oBoxWrapper.innerHeight()) / 2
});
}
}
event.preventDefault();
// THIS IS THE CALLBACK CALLED AT THE END OF CLICK
if (typeof o.complete == 'function') {
o.complete.call(this); // brings the scope to the callback
}
});
});
}
})(jQuery, window);
You can check it here: http://jsfiddle.net/benjasHu/eyka9z0b/
Is that what you need?

Why Do I Have To Click the Div Twice the 1st Time?

I am running a jQuery script and its working fine, but I have something of a toggle function that slides a div in and out when you click on it. The 1st time you have to double click it to make it work I'd love to remove this. Anyone know why its happening? Here is what I mean
http://www.gregtaylordesignstudio.com/great-Lakes-Project/actions.html
Here is the script
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
var slideout = $('#actionsBlurb');
$('#dots').hide();
$('#mapBack').delay(1000).animate({top:"45px"},800).fadeOut(400);
$('#mapBackTop').delay(1000).fadeOut(1000);
slideout.delay(4000).animate({ right: 175, }, { duration: 1000, easing: 'easeOutExpo'});
var open = true;
$(".close").click(function () {
if(open === false) {
open = true;
slideout.animate({ top: '-170px'}, { queue: false, duration: 500 });$('#dots').fadeIn(2000);
} else if(open === true) {
open = false;
slideout.animate({ top: 0}, { queue: false, duration: 500});$('#dots').fadeOut(1000);
}
});
})
;

var open = true;
$(".close").click(function () {
if(open == false) {
open = true;
slideout.animate({ top: '-170px'}, { queue: false, duration: 500 });$('#dots').fadeIn(2000);
} else{
open = false;
slideout.animate({ top: 0}, { queue: false, duration: 500});$('#dots').fadeOut(1000);
}
});

HTML on body load run a href link

I have this HTML Link:
Fade and Pop
that uses jquery to bring up a popup box.
how can i make the box appear on body load?
here is the full jquery code:
(function($) {
/*---------------------------
Defaults for Reveal
----------------------------*/
/*---------------------------
Listener for data-reveal-id attributes
----------------------------*/
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});
/*---------------------------
Extend and Execute
----------------------------*/
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
};
//Extend dem' options
var options = $.extend({}, defaults, options);
return this.each(function() {
/*---------------------------
Global Variables
----------------------------*/
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
/*---------------------------
Create Modal BG
----------------------------*/
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
/*---------------------------
Open & Close Animations
----------------------------*/
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
});
//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
});
/*---------------------------
Open and add Closing Listeners
----------------------------*/
//Open Modal Immediately
modal.trigger('reveal:open')
//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});
/*---------------------------
Animations Locks
----------------------------*/
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});//each call
}//orbit plugin call
})(jQuery);

$('#myModal').click(); or $('#myModal').reveal(); will do this

You can trigger the click event for the link, or just execute the bound function for click($('#myModal').reveal(); in your case if no other data attributes exist for the given link).