One of the challenges I'm facing is integrating a html/css modal on my webpage, which can be accessed via this link:
The issue arises when trying to utilize the main scroll bar on the page in order to navigate downwards and view the remaining content of the form. Unfortunately, my current CSS setup doesn't accommodate this requirement, and I'm hesitant about incorporating an additional scroll bar within the div. The code snippet in question appears as follows:
HTML:
<div id="openModalViewCreateClient" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Add A Client</h2>
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
... (content omitted for brevity)
</ul>
</form>
</div>
</div>
CSS:
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
... (remaining CSS rules omitted for brevity)