JSFiddle - React, Tailwind, and code Playground
HTML
<div id="clickMe" onClick="clickMe()">Click Me!</div>
<div id="modal" class="hideModal">
<p>Please select Yes or No</p>
<div id="buttonYes" class="button" onClick="selected(this.id)">YES</div>
<div id="buttonNo" class="button" onClick="selected(this.id)">NO</div>
</div>
<script>
function clickMe() {
document.getElementById('modal').className = "";
}
function selected(clicked_id) {
var selectedOpt = clicked_id;
if (selectedOpt == 'buttonYes') {
alert('Yes Clicked');
}
else {
alert('No Clicked');
}
}
</script>
CSS
#modal {
position:relative;
top:200px;
margin:0 auto;
width:200px;
height:auto;
text-align:center;
border:1px solid #000;
}
.showModal {
display:block;
}
.hideModal {
display:none;
}
.button {
display:inline-block;
margin:5px 20px;
padding:5px;
border:1px solid #000;
}