javascript - 在我按下按钮确认之前单击事件触发

Question

function deletePost(id) {
  var db_id = id.replace("post_", "");
  // Run Ajax request here to delete post from database
  document.body.removeChild(document.getElementById(id));
}

function CustomConfirmPop() {
  this.render = function(dialog, op, id) {
    var winW = window.innerWidth;
    var winH = window.innerHeight;
    var dialogoverlay = document.getElementById('dialogoverlay');
    var dialogbox = document.getElementById('dialogbox');
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH + "px";
    dialogbox.style.left = (winW / 2) - (550 * .5) + "px";
    dialogbox.style.top = "100px";
    dialogbox.style.display = "block";

    document.getElementById('dialogboxhead').innerHTML = "Confirm that action";
    document.getElementById('dialogboxbody').innerHTML = dialog;
    document.getElementById('dialogboxfoot').innerHTML = '<button type="button" onclick="Confirm.yes(\'' + op + '\',\'' + id + '\')">Yes</button> <button onclick="Confirm.no()">No</button>';
  }
  this.no = function() {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
  }
  this.yes = function(op, id) {
    if (op == "delete_post") {
      deletePost(id);
    }
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
  }
}
var Confirm = new CustomConfirmPop();

<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>
<p id="post_1">
  Today is a lovely day ...
  <button onclick="Confirm.render('Delete Post?','delete_post','post_1')">Delete</button>
</p>


<script>
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text

    var r = confirm("You Want to Remove??");
    if (r == true) {
    e.preventDefault(); $(this).parent('div').remove(); x--;
    }
});
});
//how can i use this code and apply my css styling to it becuase this works to some extent?
</script>

好的，所以当我单击“删除”时，应该会出现一个确认弹出框，在删除帖子之前询问"is"或“否”。问题是，当我单击“删除”时，它只是自行选择"is"，而我没有机会单击它或不单击它。我想知道它是否与我的 html 页面中的其他按钮冲突。

Answer 1

实际上你的逻辑工作正常，你的代码的问题是你立即关闭#dialogoverlay，而#dialogbox在外面，你应该嵌套它在里面，就是这样，因为它同时将帖子和 #dialogbox 向下推，因为覆盖层高度与整个窗口高度相同

codePen

HTML:

<div id="dialogoverlay">
  <div id="dialogbox">
    <div>
      <div id="dialogboxhead"></div>
      <div id="dialogboxbody"></div>
      <div id="dialogboxfoot"></div>
    </div>
  </div>
</div>
<p id="post_1">
  Today is a lovely day ...
  <button onclick="Confirm.render('Delete Post?','delete_post','post_1')">Delete</button>
</p>