Question

＆＃13;

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();

＆＃13;

<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>

＆＃13;

好的，所以当我点击删除时，应该有一个确认弹出框，在删除帖子之前询问是或否。问题是，当我点击删除它只是选择是自己没有我有机会点击它。我想知道它是否与我的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>

Answer 2

代码对我有用。但确认消息显示在页面的末尾。

尝试更改

dialogoverlay.style.height = winH+"px";

与

dialogoverlay.style.height = "50px";

你会发现它有效。

Answer 3

您的代码在代码段中工作正常，问题在于您需要使用CSS：绝对用于＆＃34; dialogoverlay＆＃34;和＆＃34;对话框＆＃34;。

Answer 4

<button type="button" class="dlt" >Delete</button>

现在使用jquery来获取getAlert

$(".dlt").click(function(){

var r = confirm("You Want to Remove??");
        if (r == true) {
// your code.
}
});

在我按下按钮确认之前点击事件

4 个答案: