我正在尝试整理一些代码,可以将其用作通用模式弹出消息,或提示您确认删除。因此,如果仅是一条消息,则只需要一个关闭或“确定”按钮,但是如果它是一个删除确认,则它需要一个“确定”,然后让脚本跟随单击的链接(因为它可以保存来自记录),如果单击“取消”,则返回false。
但是,此刻窗口随即弹出,我看到的按钮中填充了innerhtml,但是它会立即跟随链接。
任何帮助都会很棒!
非常感谢
<script>
function msgModal(alerttype){
if (alerttype=="del"){
document.getElementById("cancelbtn").innerHTML = "<a href=''>Cancel</a>";
document.getElementById("confirmbtn").innerHTML = "<a href='test.php?ID="+id+"'>Delete Me</a>";
document.getElementById("modalmsg").innerHTML = "<p>Are you sure you want to delete this item?</p>"
}else if (alerttype=="msg"){
document.getElementById("cancelbtn").innerHTML = "<button type=\"button\">Ok</button>";
document.getElementById("confirmbtn").innerHTML = "";
document.getElementById("modalmsg").innerHTML = "<p>This is a message</p>"
}
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassname("close")[0];
var cancel = document.getElementsByClassname("cancel")[0];
// When the user clicks the button,open the modal
modal.style.display = "block";
// When the user clicks on <span> (x),close the modal
span.onclick = function() {
modal.style.display = "none";
}
cancel.onclick = function() {
modal.style.display = "none";
return false;
}
// When the user clicks anywhere outside of the modal,close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
</script>
<link rel="stylesheet" href="message/message.css">
<!--Then this code shows the links to trigger the functions_
<!-- Trigger/Open The Modal -->
<p><a href="test.php?id=1" onclick="return msgModal('del');">Delete Option</a> | <a href="test.php?id=2" onclick="return msgModal('msg');">Message Option</a> </p>
<!-- This is the model window which pops up to confirm the message or delete -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div id="modalmsg"></div>
<div id="modalbtns">
<span class="cancel" id="cancelbtn"></span>
<span id="confirmbtn"></span>
</div>
</div>
</div>