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

Last Reply one month ago By dharmendr

Posted one month ago

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>

 

Posted one month ago

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