Dialog box appears on the click of the button, but disappears right away

Question

I am trying to display a Kendo dialog box on my page with a click of the button. The dialog box appears momentarily and then disappears right away. Below is what I have:

<div >
    @(Html.Kendo().Dialog()
        .Name("dialog")
        .Title("Software Update")
        .Content("<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>")
        .Width(400)
        .Modal(false)
        .Visible(false)
        .Actions(actions =>
        {
            actions.Add().Text("Skip this version");
            actions.Add().Text("Remind me later");
            actions.Add().Text("Install update").Primary(true);
        })
</div>

This is the JavaScript that shows the dialog box:

<script>
    function showDialog() {
       
        var message = '@Html.Raw((string)TempData["Message"])';
        console.log(message);
        var dialog = $('#dialog').data("kendoDialog");
        dialog.content(message);
        dialog.open();
          
    }
</script>

This is the button with which, I am trying to open the dialog box:

<a style="float: right; margin-bottom:20px" asp-action="Verify" class="Button btn btn-primary"  onclick="showDialog()">Verify Document</a>

I tried to put true like this:

 dialog.open(true); 

dialog box still appear momentarily and then goes away. Any help will be highly appreciated.