I am looking to enhance the capabilities of a functioning javascript code by making some edits

Check out this page and view the demo. You'll notice that when you click on the mask, the pop-up disappears. How can I make it so that clicking event is optional and set to true by default like in this code;

TINY.box.show({url:'advanced.html',width:300,height:150,
maskclick:false})

Here's the section of JavaScript code that needs editing:


TINY={};

TINY.box=function(){
var j,m,b,g,v,p=0;
return{
    show:function(o){
        v={opacity:70,close:1,animate:1,fixed:1,mask:1,maskid:'',boxid:'',topsplit:2,url:0,post:0,height:0,width:0,html:0,iframe:0};
        for(s in o){v[s]=o[s]}
        if(!p){
            j=document.createElement('div'); j.className='tbox';
            p=document.createElement('div'); p.className='tinner';
            b=document.createElement('div'); b.className='tcontent';
            m=document.createElement('div'); m.className='tmask';
            g=document.createElement('div'); g.className='tclose'; g.v=0;
            document.body.appendChild(m); document.body.appendChild(j); j.appendChild(p); p.appendChild(b);
            m.onclick=g.onclick=TINY.box.hide; window.onresize=TINY.box.resize
        }else{
            j.style.display='none'; clearTimeout(p.ah); if(g.v){p.removeChild(g); g.v=0}
        }
        p.id=v.boxid; m.id=v.maskid; j.style.position=v.fixed?'fixed':'absolute';
        if(v.html&&!v.animate){
            p.style.backgroundImage='none'; b.innerHTML=v.html; b.style.display='';
            p.style.width=v.width?v.width+'px':'auto'; p.style.height=v.height?v.height+'px':'auto'
        }else{
            b.style.display='none'; 
            if(!v.animate&&v.width&&v.height){
                p.style.width=v.width+'px'; p.style.height=v.height+'px'
            }else{
                p.style.width=p.style.height='100px'
            }
        }
        if(v.mask){this.mask(); this.alpha(m,1,v.opacity)}else{this.alpha(j,1,100)}
        if(v.autohide){p.ah=setTimeout(TINY.box.hide,1000*v.autohide)}else{document.onkeyup=TINY.box.esc}
    },
    fill:function(c,u,k,a,w,h)...

Answer №1

Consider replacing

 m.onclick=g.onclick=TINY.box.hide;

to

g.onclick = TINY.box.hide;

if (v.maskclick !== false)
    m.onclick = TINY.box.hide;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for converting this API into a JavaScript object?

My goal is to retrieve data from this API: and store it in a JavaScript variable so that when I log the variable inside the browser console, I will see a tree structure related to the API. To better illustrate what I mean, here's an image of the desi ...

Rails: Ensure that JSON form fields remain populated in case the form encounters a validation error

I am using a rails simple form to create a product with three fields inside in order to associate it with appropriate categories: <div class="form-group"> <%= f.input :child_category_id, :collection => @categories.order(:name), :l ...

Displaying time text in input element due to browser bug

I am faced with a perplexing puzzle that has left me scratching my head. Here are two seemingly identical pieces of javascript code, but one behaves unexpectedly (take note of the Console.Log): Updates the UI once, then abruptly stops updating: http://js ...

Converting a mention tag text to a <router-link> in VUEJS: Step-by-step guide

I have a body property in my data data(){ return{ body:'Hello! I am @user3 and @user4' } } I am looking to transform each @user into a clickable link that redirects to their specific URL path. <router-link :to="`/${username1}`"& ...

Hide jQuery dropdown when mouse moves away

I am working on designing a navigation bar with dropdown functionality. Is there a way to hide the dropdown menu when the mouse pointer leaves both the navbar menu and the dropdown itself? I have tried using hover, mouseenter, and mouseleave but due to my ...

React Button Axios: A Primer for Complete Beginners

For the past few weeks, I've been using create-react-app and trying to modify the App.js file to include a button that executes an axios HTTP request when clicked. However, during my attempts, I keep running into errors like "unexpected token" in hand ...

How to programmatically set the active pane in an Accordion control using JavaScript in ASP.NET AjaxControl

I am trying to dynamically change the active pane in an accordion using JavaScript. I have come across a method called set_SelectedIndex, but I am having trouble getting it to function properly. Is there a way to determine the supported methods for contr ...

MVC3: Awaiting File Download with Progress Indicator

After completing my research and looking through similar threads, I still haven't found a satisfactory answer to my problem. I am currently working with MVC3, C#, and the Razor View Engine. The situation I'm dealing with is quite straightforwar ...

How can I transform a Firestore collection into an array?

I'm struggling with converting the data retrieved from Firestore into an array that can be used for a chart.js graph. Retrieving Data from Firestore fetchData(){ //Get data this.updatesCollection = this.afs.collection(pathStats); this. ...

Using NodeJS to retrieve an array from an asynchronous loop操作

I recently started coding in nodejs and encountered an issue where I am unable to collect the items logged in the console into an array for further processing from a loop that makes URL requests. The following code initially retrieves a list of keys from ...

Customize Input Values by Selecting an Option with jQuery-UI Autocomplete

Hello there, I am a newcomer to java-script and could really use some help. My goal is to have the data in the country field automatically populated when a user enters data into the city field. I have an xml file: <ROWSET> <ROW> <city>&l ...

Learning the ins and outs of manipulating arrays using jQuery

I'm currently grappling with arrays in jQuery. I have an array being returned from PHP, where I add elements to the array within a loop like this: $table_data[]= array("id"=>mysql_result($query,$i,"id"),"name"=>trim(mysql_result($query,$i,"name ...

Ways to convert field data to lowercase in MongoDB query result

I have two Objects in my database collection. [ {"_id" : 1, name: "notLowercased"}, {"_id" : 2, name: "lowercased"}, ] Using find and $regex to search for names that include a specific string. data = await Catal ...

Does Javascript move beyond the for loop and then return to it?

Currently, I am working on creating a stopwatch in JavaScript that counts by milliseconds using setTimeout. However, I encountered an issue during the initial setup: var time = 0; function main() { for (var i = 0; i < 5; i++) { setTimeou ...

Uploading my application on multiple servers after making changes using AngularJS and PHP

Currently, I am working on an angular-php web application that is live online for multiple users, each on their own subdomain. These subdomains include: sub1.mydomain.com sub2.mydomain.com sub3.mydomain.com sub4.mydomain.com sub5.mydomain.com Issue: An ...

Utilizing React.js components for Parsing JSON Objects

As a beginner in reactjs, I am faced with the challenge of parsing JSON response fetched from an API in index.html and passing it to a component called Card.js as props. Despite being able to access the response in the console log, I am unable to render it ...

Tips for creating a seamless merge from background color to a pristine white hue

Seeking a seamless transition from the background color to white at the top and bottom of the box, similar to the example screenshot. Current look: The top and bottom of the box are filled with the background color until the edge https://i.stack.imgur.com ...

Node.js equivalent of scanfIs there a scanf equivalent in Node

When working with input streams in C, the scanf function is commonly used. Is there a similar method in NodeJS for achieving the same functionality? For example, here's a snippet of code in C: int n, m, i; scanf("%d", &n); for (i = 0; ...

Extracting information from a text field and checking which button was selected, either "yes" or "

Currently, I am exploring JavaScript examples on w3schools and I have a question. Is there a way to retrieve the text entered by the user while also determining if the user clicked OK or Cancel? I understand how to check if OK or Cancel was selected: var ...

What techniques can be utilized to obscure Tailwindcss HTML class names when deploying to production?

Is there a way to camouflage the HTML classnames in production while utilizing Tailwindcss? My current setup involves React.js and CRACO, following the guidelines provided in Tailwind's documentation. ...