CODEWITHSUNDEEP
htmlcss
aseel xx
aseel xx

Reputation: 13

Remove browser's scrollbar when popup is opened (html and CSS only)

The webpage I made is still scrollable when the modal is opened. I am trying to disable the scrollbar while the modal is open.

html:

<div id="myModal" class="modalBack">
<div class="betaModal">
        <a href="#"><span><i class="fas fa-window-close"></i></span></a>
        <h4>Tell Me Something</h4>
        <label>Your Email:</label> <input type="Email" name="Email" placeholder="[email protected]"><br>
        <label>Subject:</label> <input type="text" name="title" ><br>
        <label>Message:</label> <input type="message-text" name="Message" placeholder="Write You Message Here ..."><br>
        <input type="submit" name="submit" value="Submit">
    </div>
<a href="#" class="bodyClose"></a>
    </div>

The button that toggles the modal:

<a href="#myModal"><button type="button" class="btn btn-light betaModelBtn">Contact Me</button></a>

CSS:

.modalBack {
	z-index: 10;
	position: absolute;
	height: 100vh;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
	padding-top: 10%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}


.modalBack:target{
	opacity: 1;
	pointer-events: auto;
	position: fixed;
}

Upvotes: 1

Views: 435

Answers (1)

Davide Candita
Davide Candita

Reputation: 396

There is probably no HTML-CSS solution at the moment.

When browsers will implement the :has selector, perhaps it can be done

body:has(> .modalBack:target) {
  overflow: hidden;
}

at the moment I would do so:

<a href="#myModal" onclick="document.body.style.overflow = 'hidden'"><button type="button" class="btn btn-light betaModelBtn">Contact Me</button></a>

Upvotes: 2

Related Questions