Can you freeze unbeforeunload using jquery modal?? I thought that was only possible with alert
No, like I said you would be hacking it. You'd put the page content in a wrapper container that is hidden so its loaded but not visible except for the modal.
EXAMPLE.HTML
<html>
<head>
<title>test</title>
<style>
div#contentWrapper { float: left; width: 100%; display: none; opacity: 0; z-index: 1;}
div#modalWrapper { float: left; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2; opacity: 1; display: block; background: url('./img/transparent_white.png'); }
div#modalOuter { float: left; width: 350px; max-width: calc(90% - 40px); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; border: 1px solid #000000; box-shadow: 3px 3px 3px #888888; background: #FFFFFF; max-height: 80%; height: auto; display: block; }
div#modalContent { float: left; width: calc(100% - 40px); padding: 20px; overflow: auto; }
</style>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#modalContent').click(function(e){
e.stopPropagation();
});
$('#modalWrapper').click(function(){
$('#modalWrapper').animate({ opacity: 0 }, 200, function(){
$('#modalWrapper').hide(function(){
$('#contentWrapper').show(function(){
$('#contentWrapper').animate({ opacity: 1 }, 200);
});
});
});
});
</script>
</head>
<body>
<div id="contentWrapper">
<h1>Test Content</h1>
<div id="modalWrapper">
<div id="modalOuter">
<div id="modalContent">
This is my modal
</div>
</div>
</div>
</body>
</html>