estoy tratando de integrar un capturador de fotografía y guardado en una base de datos(firebase) en html,javascript, todo funcionaba bien, pero resulta que ahora estoy intentado desplegar la información dentro de un Popup pero ahora mi botón de "Guardar Foto" no se muestra dentro del Popup, quedando debajo del popup, ya intente con z-index pero no logro hacer que se muestre. les comparto mi código.
No se si el problema este en alguna propiedad del botón que se muestra mediante javascript
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
#snap {
background-color: #0096AE;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
display: block;
margin: auto;
/*! padding-top: 20px; */
margin-top: 5px;
}
.video-1 {
display:block;
vertical-align:baseline;
margin-top: 10px;
margin: auto;
}
.popup {
padding: 10px;
min-width: 500px;
min-height: 500px;
position: fixed;
top: 20%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #fff;
border-radius: 5px;
text-align: center;
z-index:-1; /* 1px higher than the overlay layer */
opacity: 0;
}
.popup{
transition:0.4s;
}
.overlay_canves {
content: "";
position: fixed; /* could also be absolute */
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: rgba(0,0,0,0.6);
opacity: 0;
transition:0.5s;
}
.overlay_popup.popup-open .overlay_canves, .popup-open .popup {
opacity: 1;
z-index: 11
}
.close_btn{
position: absolute;
top: 5px;
right: 10px;
padding: 10px;
color: #000;
outline: none !important;
text-shadow: none;
min-width: 1px;
font-size: 21px;
color: #8C8C8C;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<span class="overlay_popup btn-popup01">
<div class="overlay_canves"></div>
<div class="popup">
<a href="#" class="close_btn" onclick="$(this).popupClose();">×</a>
<video id="video" class="video-1" width=300 height=300 playsinline controls autoplay></video>
<!-- Trigger canvas web API -->
<button id="snap" >Capturar</button>
<!-- Webcam video snapshot -->
<canvas id="canvas" class="video-1" width="300" height="300"></canvas>
</body>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-storage.js"></script>
<script>
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxx",
projectId: "xxxxxxxxx",
storageBucket: "xxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig)
console.log(firebase)
//webcam code
const video = document.getElementById('video')
const canvas = document.getElementById('canvas')
const snap = document.getElementById("snap")
const errorMsgElement = document.querySelector('span#errorMsg')
const constraints = {
audio: false,
video: {
width: 300, height: 300
}
}
//start webcam
async function init() {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints)
handleSuccess(stream)
} catch (error) {
console.log(error)
}
}
// Success
function handleSuccess(stream) {
window.stream = stream
video.srcObject = stream
}
var context = canvas.getContext('2d')
snap.addEventListener("click", function() {
context.drawImage(video, 0, 0, 300, 300)
var image = new Image()
image.id = "pic"
image.src = canvas.toDataURL('image/png')
console.log(image.src)
var button = document.createElement('button')
button.textContent = 'Guardar Foto'
button.style.margin = 'auto'
button.style.display = 'block'
button.style.color= 'white'
button.style.padding= '15px 32px'
button.style.backgroundColor= '#0096AE'
button.style.textDecoration = 'none'
button.style.border = 'none'
button.style.fontSize = '16px'
document.body.appendChild(button)
button.onclick = function() {
const ref = firebase.storage().ref()
ref.child(new Date() + '-' + 'base64').putString(image.src, 'data_url').then(function(snapshot) {
console.log('Image Upload')
alert("Foto Guardada")
})
}
})
init()
</script>
</div>
</span>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(document).ready(function(){
$('.overlay_popup').delay(2000).queue(function(){
$('.overlay_popup').addClass('popup-open')
});
});
$.fn.popupClose = function() {
$( ".overlay_popup" ).removeClass("popup-open");
return this;
};
</script>
</body>
</html>