Đóng cửa sổ bật lên div bằng cách nhấp vào bên ngoài của nó

Tôi là người mới bắt đầu trong lập trình. Tôi đã tìm kiếm một câu trả lời nhưng không ai trong số những người tôi đã tìm thấy dường như để giải quyết vấn đề của tôi.Đóng cửa sổ bật lên div bằng cách nhấp vào bên ngoài của nó

Tôi đã sử dụng phương pháp div bật lên [how do I center javascript css popup div, no matter what the screen resolution?] được giải thích trong câu hỏi. Tôi đã tự hỏi: có thể đóng một div bằng cách nhấp vào bên ngoài nó bằng những thay đổi nhỏ trong đoạn mã sau không?

Cảm ơn bạn rất nhiều trước!

Mã của tôi:

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

Trong html, tôi có số lượng divs ẩn với id "dialog1", "dialog2" và vân vân. Khi một liên kết được nhấp vào, div hiển thị và đóng nó, tôi sử dụng liên kết img:

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

Nguồn

2013-05-31 Kristine

đăng mã của bạn để nhận được câu trả lời – Kingk

Mã nằm trong liên kết tôi đã đăng! – Kristine

Là người khởi xướng bạn sẽ cần một cách đăng ký một mouseclick trên tài liệu và sau đó đóng cửa sổ bật lên từ đó. Nếu không có mã của bạn như xa như tôi có thể đi –

Khi bạn mở cửa sổ bật lên, hãy tạo div ẩn chiều rộng chiều cao 100% nằm ở mặt sau của div cửa sổ bật lên của bạn.

Đính kèm một chức năng onclick để div:

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

Hy vọng rằng sẽ giúp

Nguồn

2013-05-31 09:54:07 SHANK

Cảm ơn bạn rất nhiều! Tôi sẽ viết lại sau khi tôi kiểm tra nó! – Kristine

Hei! Cảm ơn bạn rất nhiều, nó đã hoạt động! Tôi đã thử hai phương pháp, trước tiên là: tôi đã thêm mọi chức năng closePopUp cho mỗi div vào #cover, nhưng đó là cách quá dài và cách của bạn tốt hơn nhiều! Xin lỗi vì chỉ trả lời ngay bây giờ! – Kristine

Tuyệt vời! Ngoài ra, bạn có thể chấp nhận/upvote nó. – SHANK

Nếu không tạo ra một div vô hình chỉ với javascript:

thêm này:

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'); 
    } 
};

Nguồn

2013-05-31 10:00:51 sjkm

Cảm ơn bạn, tôi sẽ kiểm tra nó! – Kristine

Có ... Quan trọng là bạn xóa lớp phủ và đó là <div class="ui-widget-overlay ui-front"></div> w hen sử dụng Jquery 2.0.0.js ... (Có thể là với các thư viện trước thay đổi tên)

Ví dụ ...

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

Bây giờ bạn có thể tạo các nút đặc thù khác để gần cửa sổ bật lên và bạn dán mã cụ thể này cho gần:

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

hoặc

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

Nguồn

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 
});

Nguồn

2015-01-28 20:05:58 mpen

Đóng cửa sổ bật lên div bằng cách nhấp vào bên ngoài của nó

Trả lời

Các vấn đề liên quan