Does using fade effect as follows: $( "#specialBox" ).toggle( "fade" )
in jQuery UI cause the page to reload when fading out?
By the way this seems to happen only when I click the button that triggers the fadeout, (rather than pressing enter).
{
<div id="specialBox"> //the elements who fade
<p>Special box content ...</p>
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<input id = "addquery" type = "button" class = "test" value = "add query"></input> //triggering button
}
<html id= "thishtml">
<head>
<script src = "jquery-2.1.0.js"></script>
<link type = "text/css" rel = "stylesheet" href = "style.css"></link>
<script type = "text/javascript" src = "graffjavs.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<form id = "docy">
<input id = "gtr" type = "text" class = "txt"></input>
<input id = "graffbut" type = "button" class = "test" value = "test JQUERY"></input>
<div class = "out" id="output">
</div>
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<p>Special box content ...</p>
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<input id = "addquery" type = "button" class = "test" value = "add query"></input>
</form>
</body>
</html>
function toggleOverlay(){
var addquery = document.getElementById('addquery');
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(addquery.isClicked == "1"){
addquery.isClicked = "0"
$( "#specialBox" ).effect( "fade" );
$( "#overlay" ).effect( "fade" );
//overlay.style.display = "none";
//specialBox.style.display = "none";
} else {
addquery.isClicked = "1"
$( "#specialBox" ).toggle( "fade" );
$( "#overlay" ).toggle( "fade" );
//overlay.style.display = "block";
//specialBox.style.display = "block";
}
}// triggered function causing the elements to fade
function tog()
{
document.getElementById('addquery').isClicked = "0";
$('#addquery').click(function(){toggleOverlay();});
}//function that assigns the triggered function to the button
You button is a submit button. This is, has type="submit"
. When you press it, the form is submitted. Change the property to type="button"
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.