Skip to content

Custom confirm box in JavaScript | Code

  • by

The JavaScript confirm dialog cannot be customized. If you want a custom confirm box in JavaScript, then use jquery dialog customization JQuery UI – Dialog.

To start using the confirm library, you need to include some source files in your code. Use either in the following ways.

  1. Using individual files from
  2. Download and install the files locally on your server.
  3. Using NPM or Bower package manager.

via Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">

Custom confirm box in JavaScript

Simple example code.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            function functionConfirm(msg, myYes, myNo) {
                var confirmBox = $("#confirm");
                confirmBox.find(".message").text(msg);
                confirmBox.find(".yes,.no").unbind().click(function() {
                        confirmBox.hide();
                            });
                        confirmBox.find(".yes").click(myYes);
                        confirmBox.find(".no").click(myNo);
                        confirmBox.show();
            }
        </script>
        <style>
            #confirm {
                display: none;
                background-color: #f2f4ef;
                border: 1px solid #aaa;
                position: fixed;
                width: 250px;
                height: 150px;
                left: 50%;
                margin-left: -100px;
                padding: 8px;
                box-sizing: border-box;
                text-align: center;
            }
        #confirm button {
            background-color: lightblue;
            display: inline-block;
            border-radius: 5px;
            border: 1px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 80px;
            cursor: pointer;
            margin-top: 20px;
        }
        #confirm .message {
            text-align: left;
        }
        </style>
    </head>
    <body>
        <div id="confirm">
            <div class="message"></div>
            <button class="yes">Yes</button>
            <button class="no">No</button>
        </div>
        <button onclick = 'functionConfirm("Do you like Cricket?", function yes() {
            alert("Yes")
            },
            function no() {
            alert("Not Sure")
            });'>submit</button>
    </body>
</html>

Output:

Custom confirm box in JavaScript | Code

Do comment if you have any doubts or suggestions on this JS HTML UI code.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading