Estoy intentando hacer una sencilla simulación del prompt de javascript, tengo lo siguiente, que saqué de w3schools
var modal = document.getElementById("myModal");
var btn = document.getElementById("prompt");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
* {
box-sizing: border-box;
--main-color: #252b39;
--secondary-color: #00E0C7;
}
.modal {
display: none;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
width: 50%;
}
.modal-content input {
width: 100%;
}
<button id="prompt">Show prompt</button>
<div id="myModal" class="modal">
<div class="modal-content">
<input type="text" id="promptF">
<button class="accept">Accept</button>
<button class="close">Cancel</button>
</div>
</div>
Pues lo que busco es la funcionalodad normal del prompt, obtener el valor ingresado en el campo y detectar si se ha presionado el boton cancelar o fuera de la modal, se que existen librerias para crearlos de manera personalizada pero no quisiera utilizar una libreria solo para dar uso al prompt, estoy abierto a soluciones con JQuery tambien.