确认后使div在JavaScript中不可见

Question

I want to make a div visible when clicking on a button. Button should ask Yes/No confirmation. Div should be visible only when user clicks on 'Yes'.

My code is here

    <div id="Mydiv" style="display:none;" >Haiii</div>
    <input type="button" name="answer" value="Show Div" onclick="confirm_hide(this)"/>

JavaScript

function confirm_hide(ele){

   if (confirm('Do you wish to hide?')) {
   ele.style.display = 'none';
   document.getElementById('Mydiv').style.display = 'block';
    return true;
   } else return false;
    }

Answer 1

 function clicked() { var name = document.getElementById('name').value; if(confirm('Hello ' + name + ', great to see you!')) { document.getElementById('nameDiv').innerHTML = 'Hello ' + name + ', great to see you!'; document.getElementById('mainDiv').style.display = "none"; } } 

 <div id="mainDiv"> <input type="text" class="form" name="name" placeholder="Your name here!" id="name"/> <input type="button" onclick="clicked();" value="I'm ready!"/> </div> <br> <div id="nameDiv"></div> 

Answer 2

1. According to a similar question posted before there is no way to change the confirm dialogs button.

2. I would suggest you can use bootstrap modal or jQueryUI.

   There is even a workaround in the jQueryUI for this.

3. Or you can use bootstrap Modal. Here is the link for it

I hope my suggestions help with your problem.

Answer 3

You can do this

function confirm_hide(ele){
    if (confirm('Do you wish to hide?')) {
        ele.style.display = 'none';
        document.getElementById('Mydiv').style.display = 'block';
        return true;
    } else {
        document.getElementById('Mydiv').style.display = 'none';
        return false;
    }
}

Answer 4

You can do like this also:

 function confirm_hide(ele){ if(confirm('Do you wish to hide?')){ document.getElementById('Mydiv').style.display = 'block'; document.getElementById('mainDiv').style.display = 'none'; } } 

 <div id="Mydiv" style="display:none;" >Haiii</div> <div id="mainDiv"> <input type="button" name="answer" value="Show Div" onclick="confirm_hide()"/> </div> 

Answer 5

HTML

<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show" class="confirm">

JS

var div    = document.getElementById("mydiv");
var button = document.getElementsByClassName("confirm");

button.addEventListener('click',confirm_hide());


function confirm_hide(){

var hide =  confirm('Do you wish to hide?');  

if(hide == true){
    button.style.display = 'none';
    div.style.display = 'block';
}
else{
      button.style.display = 'block';
      div.style.display = 'none';
    }


}