Back

Explore Courses Blog Tutorials Interview Questions

How to change the style of the alert box?

0 votes
2 views
in Web Technology by (7k points)

I want to change the style of “OK” button in the alert box. How can I do it?

<head>

    <script type="text/javascript">

        function show_alert() {

            alert("Hello! I am an alert box!");

        }

    </script>

</head>

<body>

    <input type="button" onclick="show_alert()" value="Show alert box" />

</body>

1 Answer

0 votes
by (13.1k points)

To change the style you have to create an HTML element and mimic the alert() functionality. The jQuery UI Dialogue does a lot of the work for you.

Here is the example:
 

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery UI Dialog - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>

  $( function() {

    $( "#dialog" ).dialog();

  } );

  </script>

</head>

<body>

 

<div id="dialog" title="dialog">

  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>

</div>

 

 

</body>

</html>

Want to be a Full Stack Developer? Check out the Full Stack Developer course from Intellipaat.

Related questions

0 votes
1 answer
Add inline style using Javascript
asked Apr 10, 2021 in Web Technology by Jake (7k points)
0 votes
1 answer
How to have a default option in Angular.js select box
asked Aug 28, 2019 in Web Technology by Sammy (47.6k points)
0 votes
1 answer
Removing an item from a select box
asked Sep 9, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
How to edit a JavaScript alert box title?
asked May 15, 2021 in Java by sheela_singh (9.5k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...