Home/ Questions/Q 9164065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:35:31+00:00

I have a rather simple question for once. I have delete buttons that open

  • 0

I have a rather simple question for once. I have delete buttons that open modal pop ups to confirm or deny deletion. I would like these modal pop ups to fade in on click and fade out on cancel. I’ve tried a few different things already, no luck so far. I just need a simple solution. Thanks in advance. Here’s my code

<style>
div.delModal
{   
    position:absolute;
    border:solid 1px black;
    padding:8px;
    background-color:white;
    width:160px;
    text-align:right
}
</style>
<script>
function showModal(id) {
        document.getElementById(id).style.display = 'block';
        //$(this).fadeIn('slow');
    }
    function hideModal(id) {
        document.getElementById(id).style.display = 'none';
    }

</script>
</head>

<body>
<input type ="button" value="delete" onclick="showModal('delAll1')">

<div class="delModal" style="display:none" id="delAll1">
  <img src="images/warning.png" />&nbsp;Are you sure you want to delete vessel and the corresponding tanks?<br />
    <input type="button" value="Cancel" class="hide" onclick="hideModal('delAll1')"/>     
    <input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use .fadeIn() and .fadeOut() on your id parameter ("delAll1") not on this.

    function showModal(id) {
    $("#" + id).fadeIn('slow');
}
function hideModal(id) {
    $("#" + id).fadeOut('slow');
}

    By using, $("#" + id) you can select an element by its id, that’s "#" + id.

    See it here.

    Note: Change from onLoad to no wrap (head) under framework on the left sidebar to fix the scope issue.

    • 0