确认后，在JavaScript中使div不可见

Question

我希望点击按钮时可以看到div。按钮应询问是/否确认。只有当用户点击“是”时，Div才会显示。

我的代码在这里

    <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. 我建议您使用bootstrap模式或jQueryUI。

   There is even a workaround in the jQueryUI for this.

3. 或者你可以使用bootstrap Modal。 Here is the link for it

我希望我的建议有助于解决您的问题。

Answer 3

你可以这样做

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

你也可以这样做：

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';
    }


}