How to give the "modal" effect on a div?

Asked

Viewed 563 times

2

I have a div which is the progress bar, and would like that div blocked the interaction with div below it. Basically while this div progress bar was appearing, did not allow it to be possible to touch what is below it. As the effect of modal, that blocks everything below it.

javascript html css

  • Is there something done? Put it here so we can take a look

3 answers

1

Follow this example below, this site has other examples of modal box https://www.w3schools.com/howto/howto_css_modals.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

1

Here is an option. But you need to create an event to give a displat:none; in <div class="overlay"> when the bar completes.

I disabled the Submit button with tabindex="-1" to not be able to access it with the Tab but the ideal would be to do along with the JS that removes the overlay.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
h2 {
    margin-left: 150px;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.holder {
    position: relative;
    width: 350px; 
    background: aqua; 
    border: 1px solid #000; 
    color: #000;
    margin: auto;
}
.mask {
    position: absolute; 
    z-index: 10; 
    overflow: hidden; 
    width: 0%; 
    background-color: red; 
    white-space:nowrap; 
    color: #FFF;
    animation: load 5s linear infinite;
    /* animation-fill-mode: forwards; descomente se quiser que ela pare quando completar  (remova o "infinite" do animation acima)*/
}
@keyframes load {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: block;
}
<div class="overlay">
    <div class="container">
        <div class="holder">
            <div class="mask">
                <h2>100%</h2>
            </div>
            <h2>100%</h2>
        </div>
    </div>
</div>

<div >
    <h1>Título</h1>
    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e o.
<br>
<br>
<br>
    <input type="submit" tabindex="-1">
</div>

0

Use Jquery for this

function disativa() {
   $("#test *").attr("disabled", "disabled").off('click');
}

Call this function when the toolbar starts

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.