0

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

Imagen Popup Botón

<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>

1 respuesta 1

0

Está insertando el botón en el body pero deberías insertarlo el contenedor de overlay_popup.

Donde tienes esto document.body.appendChild(button) deberías cambiarlo por lo siguiente.

// quizá este no es el contenedor sino el .popup pero eso no lo puedo saber así sin mas
// Esto ya lo puedes adaptar tu al elemento correcto.
document.querySelector('.overlay_popup').appendChild(button);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.