Alamri Alamri - 7 months ago 7
HTML Question

cover a text input with a dialog

I'm trying to put a dialog with two options "yes and no" that covers a text input so the user have to choise one of the options before he can be able to type in. It should be transparent and only covers the text input only.

What's the trick that i can use in such case ?

Answer

You can set input disabled attribute to true, set button elements css position to absolute to cover input; at click of button elements, set top of button elements to position below input , adjust opacity of button elements; remove disabled attribute at input; set button onclick handler to null

var buttons = document.querySelectorAll("button");
var input = document.querySelector("input");
var label = document.querySelector("label");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function(e) {
    label.innerHTML = e.target.innerHTML;
    input.removeAttribute("disabled");
    for (var j = 0; j < buttons.length; j ++) {
      buttons[j].className = "show";
      buttons[j].disabled = true;
      buttons[j].onclick = null;
    }
  }
}
button {
  display:block;
  width: 75px;
  height:50px;
  appearance:button;
  opacity:.5;
  position:absolute;
}

button:nth-of-type(2) {
  left:82px;
}

input {
  width:145px;
}

.show {
  top:28px;
  opacity:.25;
}
<button>Yes</button><button>No</button>
<input type="text" disabled /><label></label>

Comments