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

Question

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

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

2

I have div which is progress bar , and I would like this div to block interaction with div below it. Basically as long as this div progress bar was appearing, do not allow it to be possible to touch what is below it. Like the effect of modal , which blocks everything below it.

javascript html css

asked by anonymous 16.01.2018 / 13:15

3 answers

MSIL can be converted to native code? How to do a find with pagination and search term at the same time with Spring data?

score 1 · Answer 1

Follow this example below, this site has other modal box examples link

<!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>

score 1 · Answer 2

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

I've disabled the Submit button with tabindex="-1" so I can not access it with Tab 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>

score 0 · Answer 3

0

Use Jquery for this

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

Call this function when the start bar

16.01.2018 / 14:28