Show (Display) JavaScript confirm alert box in middle of screen

AliYilmaz
 
on Apr 06, 2021 03:00 AM
Sample_116939.zip
5103 Views

Hi,

I want to show the alert message in the middle of the screen. How is this possible.

<script type="text/javascript">
    var message = '@mesaj';
    if (message != "")
    {      
        if (confirm(message))
        {
           
        }
        else {     
            alert(message);
        }
    }
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Apr 06, 2021 03:21 AM

Hi AliYilmaz,

You can not control the browser display behaviour.

Instead you should write your own function to display div with your message.

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function OnConfirm(msg, myYes) {
            var confirmBox = $("#confirm");
            confirmBox.find(".message").text(msg);
            confirmBox.find(".yes").unbind().click(function () {
                confirmBox.hide();
            });
            confirmBox.find(".yes").click(myYes);
            confirmBox.show();
        }
    </script>
    <style>
        #confirm {
            display: none;
            background-color: #F3F5F6;
            color: #000000;
            border: 1px solid #aaa;
            position: fixed;
            width: 270px;
            height: 100px;
            left: 40%;
            top:40%;
            margin-left: -100px;
            padding: 10px 20px 10px;
            box-sizing: border-box;
            text-align: center;
        }

            #confirm button {
                background-color: #FFFFFF;
                display: inline-block;
                border-radius: 12px;
                border: 4px solid #aaa;
                padding: 5px;
                text-align: center;
                width: 60px;
                cursor: pointer;
            }

            #confirm .message {
                text-align: left;
            }
    </style>
    <div id="confirm">
        <div class="message">Do you want to delete the record?</div>
        <br />
        <button class="yes">Yes</button>
        <button class="yes">No</button>
    </div>
    <input type="button" value="Show" onclick="OnConfirm();" />
</body>
</html>

Demo