クリックイベントが発生し、私は私がクリックしたときに確認がなければならない削除

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>

[OK]を確認するために、ボタンを押すことができます前に、ポストを削除する前に、いいえはい尋ねるか、ボックスをポップアップ表示。問題は、私がそれをクリックするチャンスを得ることなく私は自分自身のオフを選択するだけで削除をクリックしたときです。 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 = "50px"; 

で

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

を変更しようと、あなたはそれが動作表示されます。

Answer 3

あなたのコードはスニペットで正常に動作していますが、問題はCSSを使用してposition：absoluteを "dialogoverlay"と "dialogbox"に使用する必要があることです。

Answer 4

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

今それは私のために正常に動作しますgetAlert

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

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