How to let modals(dialogs) appear at mouse position?

[chenzhiy2001]

When adding a new node, a dialog appears at the center of the screen. It feels not so convenient since I have to move the cursor every time when I want to add a node.
So I write a script which runs since startup. The script records the cursor's position everytime mouse is clicked. When a element with 'tc-modal' class appears, the script changes its s position to where cursor is located by adding "position" and "left", "top" properties in its 'style' attribute.
Unfortunately this method only works in tiddlywiki with no other plugins. This method is quite dirty so it's not strange that weird things happened in tiddlymap. Wondering if there's a cleaner way to let modals appears at mouse position, which feels really good and improves effeciency. Thanks!

The script looks like this:

//$:/tags/StartupAction.js
//console.log("STARTED UP!");
$tw.mousePosition = [0, 0];
//console.log($tw.mousePosition[0],$tw.mousePosition[1]);
document.onmouseup = function (e) {
    $tw.mousePosition[0] = e.clientX; 
    $tw.mousePosition[1] = e.clientY;
    //console.log($tw.mousePosition[0],$tw.mousePosition[1]);
};


// Select the node that will be observed for mutations
const targetNode = document.getElementsByTagName('body')[0];

// Options for the observer (which mutations to observe)
const config = { attributes: false, childList: true, subtree: false };//czy0109 NOTE HERE

// Callback function to execute when mutations are observed
const callback = function (mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed. Only detecting childList, not subtree or attributes.');
            try {
                if (!document.getElementsByClassName('tc-modal')[0].hasAttribute("doNotMove")) {
                    document.getElementsByClassName('tc-modal')[0].setAttribute("doNotMove", "yes");
                    document.getElementsByClassName('tc-modal')[0].style.position = "fixed";
                    document.getElementsByClassName('tc-modal')[0].style.left = $tw.mousePosition[0].toString() + "px";
                    document.getElementsByClassName('tc-modal')[0].style.top = $tw.mousePosition[1].toString() + "px";
                }
            }
            catch (err) {
                console.log('tc-modal not detected: ' + err.message);
            }
        }
        /* 0109czy maybe used someday
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
       */
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
//observer.disconnect();