팝업 및 오버레이 페이지

오버레이가있는 팝업 페이지를 만들었지 만 (별도의 페이지가 div에로드 됨) 팝업을 닫을 수있는 옵션이 표시되지 않습니다. http://jymeross.com/project5.html 팝업 및 오버레이 페이지

가 어떻게이 창 닫기 (.cancel 클래스) 표시합니까 : 여기

팝업 창에 대한 링크입니다? 은 "X"링크는 현재 여기 보여주고있다 : http://jymeross.com/project5.html#loginScreen

다음은 DIV의 내용을로드 한 후 갤러리에서 서브 DIV를 확인하고 코드

<head> 

<link rel="stylesheet" href="slider1.css" type="text/css" charset="utf-8" /> 

<style type="text/css"> 
.button 
{ 
    width: 150px; 
    padding: 10px; 
    background-color: #FF8C00; 
    box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); 
    font-weight:bold; 
    text-decoration:none; 
} 
#cover{ 
    position:fixed; 
    top:0; 
    left:0; 
    background:rgba(0,0,0,0.6); 
    z-index:50; 
    width:100%; 
    height:100%; 
    display:none; 
} 
#gallery 
{ 
    height:525px; 
    width:675px; 
    margin:0 auto; 
    position: relative; 
    z-index:100; 
    display:none; 
    border:5px solid #cccccc; 
    border-radius:10px; 
} 
#gallery:target, #gallery:target + #cover{ 
    display: block; 
    opacity:2; 
} 
.cancel 
{ 
    display:block; 
    position:absolute; 
    z-index:100; 
    top:3px; 
    right:2px; 
    height:30px; 
    width:35px; 
    font-size:30px; 
    text-decoration:none; 

} 
</style> 


</head> 

<body> 


<br><br> 
<div align="center"> 
<a href="#gallery" onclick="load_project1()" class="button">View Gallery</a> 

</div><!--close center--> 


<div id="gallery"> 
    <a href="#" class="cancel">&times;</a> 
</div><!--close gallery--> 

<div id="cover"> 
</div> 

<script> 

    function load_project1() { 
    document.getElementById("gallery").innerHTML='<object type="text/html" width="575" height="325" data="project1.html"></object>'; 
    } 

</script> 


</body>

출처

2016-12-27 Rachel Jarz

이 팝업에 사용한 자바 스크립트 라이브러리는 무엇입니까? 이것은 CSS 버그 또는 js에 관한 것이지만? 당신이 무엇을 성취하기 위해 무엇을했는지, 그리고 지금까지 무엇이 효과가 없는지를 구체적으로 설명해 주시겠습니까? – Codemole

나는 팝업을 위해 CSS를 사용하고있다. 팝업 내에서, 내가 밑줄에있는 스크립트를 추가하여 팝업 div에있는 다른 HTML 페이지를로드 할 때, 즉 .cancel 클래스 ("x"는 팝업 닫기)를 잃어 버렸습니다. –

입니다.

<div id="gallery"> 
    <a href="#" class="cancel">&times;</a> 
    <div id="gallery-body"></div> 
</div> 


function load_project1() { 
    document.getElementById("gallery-body").innerHTML='<object type="text/html" width="575" height="325" data="project1.html"></object>'; 
    }

그런 다음 가까운 링크를 유지합니다.

출처

2016-12-27 22:42:26 Codemole

답변

관련 문제