What specific "transition" are you aiming to achieve? What kind of visual effect do you intend to implement on your modal? The intention behind your approach is not entirely clear; however, based on the usage of visibility:hidden/visible, I presume you're looking to create a gradual fade-in and fade-out transition when users interact with buttons within the modal.

If your goal is to incorporate a fade-in/fade-out animation, it's essential to set the opacity to 0 initially:

opacity: 0;

Then, when you want to reveal the modal, adjust the opacity to 1.

Nevertheless, you might encounter several challenges while implementing this technique. Nonetheless, it serves as a valuable learning opportunity to gain familiarity with the operational dynamics between HTML elements and CSS properties.

UPDATE: In alignment with my earlier comments, below is an illustrative example along with some guidance.

To begin with, consider the BODY element as the foundation of your webpage, analogous to a human body. You append various elements resembling individual body parts to it. Your utilization of z-index demonstrates a sound understanding in this regard, hence I won't delve extensively into this aspect. While more experienced developers may introduce complex discussions related to DOM specifics and attachment methods, let’s maintain simplicity for now.

Subsequently, every element features certain intrinsic attributes. For instance, a DIV element exhibits inline-block as its inherent attribute. Furthermore, a P tag comes with default margin settings and functions as a block-level component. You have the liberty to override these defaults via CSS or supplement additional attributes, similar to customizations you've been implementing by assigning CLASS values which define unique characteristics for each element (though they remain rooted in their base elements like DIV, P, A, SPAN, etc).

An in-depth comprehension of these attributes is equally crucial. Evidently, you possess considerable knowledge in this domain, thus there isn’t much need for elaboration except for the following:

• Visibility - Despite remaining imperceptible, the element retains its presence within the BODY structure, exerting influence on adjacent elements akin to an invisible limb attached to a human body. Although functional, this invisible component escapes rendering by GPU or relevant graphics processing units.
• Opacity - Comparable to visibility but offering enhanced manageability. An opacity value of 1 (or 100%) renders the element fully visible, whereas 0 translates to absolute transparency, effectively concealing the element from view. Intermediate values such as .5 or 50% ensure partial visibility allowing objects positioned behind to be partially discernible through the transparent element. Consequently, the GPU continues rendering the element whilst accommodating varying levels of transparency indicated by the opacity setting.
• Display - Responsible for dictating an element's behavioral traits within the layout and governing its interaction with neighboring elements. Common applications encompass styles such as “display: none” that seemingly erase the element from visual display without altering its underlying HTML existence. As a result, the element remains inert concerning any impact on surrounding elements.

Moreover, grasping the intricacies associated with these attributes assumes added significance. In your scenario, dedicating attention towards transitions proves fundamental. By incorporating the transition property, one can modify how browsers handle alterations in element attributes thereby facilitating the creation of diverse effects like fades, movements, etc., all delivered seamlessly if executed adeptly.

Importantly, transformations directly affecting mentioned attributes occur instantaneously prompting the necessity for transition effects to instill fluidity into these modifications. However, such transitions solely manifest upon pre-existing attribute adjustments. For instance:

.MyDivClass{
    height: 32px;
    width: 32px;
    transition: all .3s ease;
}

.MyDivClassExtra{
    height: 64px;
    width: 64px;
}

The div expands gradually over a duration of 0.3 seconds due to predefined width and height parameters. Should such attributes remain undefined or set at auto, instantaneous transitions transpire owing to the absence of pertinent attribute data necessary for manipulation. Even configuring dimensions to zero engenders a perceptible effect given the presence of adjustable attributes.

In programming contexts, occasional suspension of conventional logic manifests, particularly concerning attributes like Visibility where anticipating gradual visual alterations despite toggling its state via transitions leads to erroneous assumptions. Conversely, Opacity introduces nuanced gradations enabling seamless transitions ranging from complete invisibility (at 0%) to full visibility (at 100%). Analogously, Display introduces binary behavior denoting mere existence or absence within the document structure, albeit slightly convoluted compared to previous attributes.

A notable discrepancy evident in your code pertains to the .modelstate overlay obstructing user interaction across the interface. Implementing visibility:hidden does not render elements unresponsive; rather, they retain influence albeit veiled from direct sight – continuing to exert control over surrounding components.