요소

Question

내가 지금처럼 HTML이 포함되어 있습니다. 예를 들어, 양식 (AJAX를 통해) 일부 기본 값을로드하는 동안, 나는 포함 된 물건을 "흐리게"(나는 #container의 불투명도로 추측한다)하지만 사람들이 필드를 클릭 할 수 있기를 원하지 않는다. .

2) 무언가로 #cover을 돌려 그것을 클릭하면 효과적으로 호출이 실패하면

과 함께이 효과적으로 불가능하고있다) (데이터의 재 장전을 시도하기 위해 클릭을 기다리는 것을 의미한다 "모달"A " "div? 나는 필드를 클릭 할 때 이벤트가 필드 자체에 있고 컨테이너에 거품이 생길 것임을 알았습니다 ... 잘못된 방향으로 가고 있습니까?

Answer 1

나는 당신이 만들고 싶은 것에 대해서는 잘 모르겠지만, 당신을 위해 만들었습니다. 이것이 당신이 원하는 것인지 확인하십시오. 단추를 클릭하면 모달이 열리고 상자가 나타나고 다른 내용이 blured됩니다.

// 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"; 
 
document.getElementById("blurit").style.filter = "blur(4px)"; 
 
    document.getElementById("blurit").style.WebkitFilter = "blur(4px)"; 
 
} 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
document.getElementById("blurit").style.filter = "blur(0)"; 
 
    document.getElementById("blurit").style.WebkitFilter = "blur(0)"; 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
     modal.style.display = "none"; 
 
document.getElementById("blurit").style.filter = "blur(0)"; 
 
    document.getElementById("blurit").style.WebkitFilter = "blur(0)"; 
 
    } 
 
}

/* 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; 
 
}

<div id="blurit"> 
 
<p>Test it</p> 
 
<img src="https://static.pexels.com/photos/909/flowers-garden-colorful-colourful.jpg" alt="Pineapple" width="500" height="300"><br><br> 
 
<button onclick="myFunction()" id="myBtn">Try it</button> 
 
</div> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <span class="close">×</span> 
 
    <p>Some text in the Modal..</p> 
 
    </div> 
 

 
</div>