I have a modal page with the buttons close and minimize.
The minimize button has a onclick function to change its background between maximize and minimize and another tooglefulscreen to exit and enter fullscreen mode.
Close button has the function exitfullscreen to close the page in full screen.
I think my problem is that after executing the function the button that was clicked does not return to the original image, it remains the same as the last function executed.
event 1 Home page modal > minimizar.png > click > changes to > maximize.png Home page modal > close.png > click > close the modal window
event 2 (event should start as event 1) Home page modal > maximize.png > click > changes to > minimize Home page modal > close.png > click > close modal window
event 3 (event should begin equal to event 2) Home page modal > minimize > click > changes to > maximize.png Home page modal > close.png > click > close modal window
What happens is that after the end of these functions or after closing the modal page through the close button, the background of the minimize button remains the same as its last function, for example, if you close the page without clicking the " minimize "and after that I open the page, the page opens with the minimize button active to after being clicked exit the full screen mode and change the image to maximize, but if I press the minimize and minimize button and after that I close the page when I open it again the maximize button appears active in full screen and the effect is reversed.
$(document).on('click', '#botao1', function() {
$("#status").html("mudando o nome do botão para botao2");
$(this).attr("id", "botao2").html("");
});
$(document).on('click', '#botao2', function() {
$("#status").html("retornando o nome do botão para botao1");
$(this).attr("id", "botao1").html("");
});
function toggleFullScreen(id) {
var div = document.getElementById(id);
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (div.requestFullScreen) {
div.requestFullScreen();
} else if (div.mozRequestFullScreen) {
div.mozRequestFullScreen();
} else if (div.webkitRequestFullScreen) {
div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}#botao1 {
position: fixed;
z-index: 9999;
width: 70px;
height: 70px;
top: 5px;
right: 110px;
background: url(Img/btn-maximizar.png) no-repeat;
}
#botao1:hover {
background: url(Img/btn-maximizar-2.png) no-repeat;
}
#botao2 {
position: fixed;
z-index: 9999;
width: 70px;
height: 70px;
top: 5px;
right: 110px;
background: url(Img/btn-minimizar.png) no-repeat;
}
#botao2:hover {
background: url(img/btn-minimizar-2.png)no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="botao1" onclick="toggleFullScreen('full')"></button>
<button class="fechar" onclick="exitFullscreen();">X</button>