I am a total beginner in programming. I have been searching for an answer but none of the ones I have found seem to solve my problem. I used the how do I center javascript css popup div, no matter what the screen resolution? pop up div method explained in the question.
Is it possible to close a div by clicking outside of it with small changes to the following code?
<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>In HTML I have the number of divs hidden with the ids dialog1, dialog2 and so on. When a link is clicked, the div shows up and to close it I use an img link:
< a href="#2" onclick="closePopUp('dialog2');">< img src="/img/close.png" height="30px"></a >4 Answers
When you open the pop up, create an invisible div of height width 100%, which lies at the back of your pop-up div.
Attach an onclick function to the div:
document.getElementById('invisibleDiv').onclick = function()
{ document.getElementById('popup').style.display = 'none';
}Hope that helps
3var $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
});Without creating an invisible div just with javascript:
add this:
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'); }
};Yes... Important you remove the overlay and that is <div></div> when use the Jquery 2.0.0.js... (It may be that with the previous libraries change the name)
Example...
<html>
<head>
<script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script>
<link href="" 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 >
</div>
<input type="button" value="Edit"/>
<div title="Edit Parameter"></div>
</body>
<div title="Choose parameter" > <label> inserta el nombre del Parameter que quiere modificar<label><br /> <label> ID <input type=text size=30></label>
</div>
</html>Now you can create the other particular button for close the window pop up and you paste this specific code for close:
$( "#wnd_Paramedit" ).dialog("close");or
$( "#wnd_Paramedit" ).dialog("destroy");
