외부 팝업 상자를 클릭하여 닫습니다.

저는 프로그래밍 초보자입니다. 나는 해답을 찾고 있었지만 찾은 사람 중 아무도 내 문제를 해결하지 못하는 것 같습니다.외부 팝업 상자를 클릭하여 닫습니다.

나는 질문에 설명 된 팝업 방법을 사용했다. 궁금 해서요 : 그것은 다음 코드에서 작은 변화와 함께 그것의 바깥 쪽을 클릭하여 div를 닫을 수 있습니까?

미리 감사드립니다.

내 코드 :

<script type="text/javascript"> 
    function showPopUp(el) { 
     var cvr = document.getElementById("cover") 
     var dlg = document.getElementById(el) 
     cvr.style.display = "block" 
     dlg.style.display = "block" 
     if (document.body.style.overflow = "scroll") { 
      cvr.style.width = "1024" 
      cvr.style.height = "100%" 
     } 
    } 
    function closePopUp(el) { 
     var cvr = document.getElementById("cover") 
     var dlg = document.getElementById(el) 
     cvr.style.display = "none" 
     dlg.style.display = "none" 
     document.body.style.overflowY = "scroll" 
    } 
</script> 
<style type="text/css"> 
    #cover { 
     display:  none; 
     position:  fixed; 
     left:   0px; 
     top:   0px; 
     width:   100%; 
     height:   100%; 
     background:  gray; 
     filter:   alpha(Opacity = 50); 
     opacity:  0.5; 
     -moz-opacity: 0.5; 
     -khtml-opacity: 0.5 
    } 

</style>

HTML에서, 내가 지금의 식별자 "dialog1", "dialog2"와 함께 숨겨진 된 div의 수 있습니다. 링크를 클릭하면, 사업부와 나는이 IMG 링크 사용을 닫습니다 나타 : 당신이 팝업을 열 때

< a class="close" href="#2" onclick="closePopUp('dialog2');">< img src="/img/close.png" height="30px"></a >

출처

2013-05-31 Kristine

답변을 얻으려면 코드를 게시 – Kingk

코드는 내가 게시 한 링크에 있습니다! – Kristine

초보자라면 문서에 마우스 커서를 등록한 다음 거기에서 팝업을 닫을 수있는 방법이 필요합니다. 코드가 없으면 내가 갈 수 있습니다. –

는, 높이의 눈에 보이지 않는 DIV 폭을 만듭니다의 뒷면에 자리 잡고 100 %, 귀하의 팝업 div.

document.getElementById('invisibleDiv').onclick = function() 
{ 
    document.getElementById('popup').style.display = 'none'; 
}

희망 단지 자바 스크립트로 보이지 않는 사업부를 만들지 않고

출처

2013-05-31 09:54:07 SHANK

대단히 감사합니다! 내가 그것을 조사하고 난 후에 쓸 것이다! – Kristine

안녕하세요! 대단히 고마워요. 두 가지 방법을 시도했는데 첫 번째는 #cover에 대한 모든 div에 대해 모든 closePopUp 함수를 추가했지만 너무 길었고 길은 훨씬 낫습니다! 지금 대답하는 것에 대해 유감스럽게 생각합니다! – Kristine

그게 좋습니다! 또한 수락하거나/upvote 수 있습니다. – SHANK

하는 데 도움이 :

이 사업부에 온 클릭 기능을 부착

이 추가

function getOffset(el) { 
    var _x = 0; 
    var _y = 0; 
    while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
     _x += el.offsetLeft - el.scrollLeft; 
     _y += el.offsetTop - el.scrollTop; 
     el = el.offsetParent; 
    } 
    return { top: _y, left: _x }; 
} 

// function to check intersection rectangle <-> point 
function intersects(ax1, ay1, ax2, ay2, px, py) { 
    return !(ax2 < px || ax1 > px || ay2 < py || ay1 > py); 
} 

document.onclick = function(event) { 
    var dialog = document.getElementById('dialog'); 
    var offset = getOffset(dialog); 
    var ax1 = offset.left; 
    var ay1 = offset.top; 
    var ax2 = ax1 + 300 /* dialog width */; 
    var ay2 = ay1 + 300 /* dialog height */; 

    if(!intersects(ax1, ay1, ax2, ay2, event.pageX, event.pageY)) { 
     closePopUp('dialog'); 
    } 
};

출처

2013-05-31 10:00:51 sjkm

고맙습니다. 제가 확인하겠습니다! – Kristine

예 ... 오버레이를 제거하는 것이 중요하며 그 것은 <div class="ui-widget-overlay ui-front"></div>입니다. 암탉이 Jquery 2.0.0.js이 ... 이제

예 ...

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script> 

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
    <script type="text/javascript"> 
// <---- VENTAÑAS DE PARAMETERES----> 
$(document).ready(function() { 
$("#wnd_Paramedit").dialog({ 
       autoOpen: false, 
       height: 'auto', 
       width: 405, 
       modal: true, 
       resizable:false, 
       buttons: { 
        "Accept": function() { 


         $(this).dialog("close");  
        }, 
        Cancel: function() { 
         $(this).dialog("close"); 
        } 
       }, 
       close: function() { 
        $(this).dialog("close"); 
       } 
      }); 

      $("#btn_Pedit").click(function() { 
        $("#wnd_Paramedit").dialog("open"); 
$("div").removeClass("ui-widget-overlay ui-front"); 
       }); 
}); 
</script> 
<body> 
<h3>List of parameters</h3> 
<div id="sortparam" > 


</div> 
<input type="button" id="btn_Pedit" value="Edit"/> 
<div id="wnd_EditParam" title="Edit Parameter"></div> 
</body> 
<div id="wnd_Paramedit" title="Choose parameter" > 
    <label> inserta el nombre del Parameter que quiere modificar<label><br /> 
    <label> ID <input type=text size=30 id="med"></label>  
</div> 
</html>

당신이 가까이 창에 대한 다른 특정 버튼을 만들 팝업 수 있습니다 (이것은 이전 라이브러리 이름을 변경하여 해당 될 수있다)를 사용하고

$("#wnd_Paramedit").dialog("close");

또는

$("#wnd_Paramedit").dialog("destroy");

출처

2013-05-31 10:12:46

var $popup = $('#your-popup'); 

$('body').on('click', function(ev) { 
    $popup.hide(); // click anywhere to hide the popup; all click events will bubble up to the body if not prevented 
}); 

$popup.on('click', function(ev) { 
    ev.stopPropagation(); // prevent event from bubbling up to the body and closing the popup 
});

: 당신은 가까운이 특정 코드를 붙여 넣습니다

출처

2015-01-28 20:05:58 mpen

외부 팝업 상자를 클릭하여 닫습니다.

답변

관련 문제