Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

A very simple Alert and Confirm Box style with css

I have the follow simple code for a confirm box

<!DOCTYPE html>
<html>
    <body>
        <p>Click the button to alert the hostname of the current URL.</p>

        <button onclick="myFunction()">Try it</button>

        <script>
            function myFunction() {
                confirm("Confirm!!!!");
            }
        </script>
    </body>
</html>

but my problem is I want with css to style the OK and Cancel button with a very simple way. I'm looking for a real simple solution.

like image 625
TLSK Avatar asked Oct 17 '25 04:10

TLSK


1 Answers

This question has been asked more:

  • How to style default confirm box with only css?
  • confirm box styling

Answer; you can NOT style the confirm() function it's dialog box since it's browser generic.


You will have to search for alternatives like these:

  • jQuery Boxy: onehackoranother.com/projects/jquery/boxy/
  • jQuery Dialog: jqueryui.com/dialog/#modal-confirmation

You could also try to create your own dialog box. Which is not quite simple as you asked for. However, lot's of tutorials can be found:

  • Tutorial 1: www.developphp.com/view.php?tid=1385
  • Tutorial 2: tutorialzine.com/2010/12/better-confirm-box-jquery-css3/

(Sorry, as a beginner I'm not allowed to place more links)

like image 133
Matthijs van Hest Avatar answered Oct 18 '25 21:10

Matthijs van Hest