CODEWITHSUNDEEP
javascripthtml
Alamri
Alamri

Reputation: 2182

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 ?

Upvotes: 0

Views: 129

Answers (2)

guest271314
guest271314

Reputation: 1

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>

Upvotes: 1

xagos
xagos

Reputation: 98

To simplify add the 'disabled' attribute to the input first. This will prevent the user from typing in the input. 

<input type="text" id="inputId" disabled"/>

Then create the dialog with two buttons yes and no. Attach a js function to the yes block that enables the text input and gets rid of the dialog box.

<button onclick="yesFunc()">Yes</button>
function yesFunc() {
    document.getElementById('inputId').removeAttr('disabled');
    document.getElementByI('dialogId').css('display','none');
}

Then from there its all styling

Upvotes: 1

Related Questions