How to Style Default Confirm Box With Only Css

How to style default confirm box with only css?

It is not possible. This window is displayed by the browser using the platform's UI kit. It's not in the DOM, not visible from the CSS or Javascript, there's nothing you can do.

However, some very simple jQuery code can do the trick. How about $('a').confirm(); ?

A very simple Alert and Confirm Box style with css

alert and confirm are built-in to JavaScript and STOP page execution until they are answered, which is what allows you to do:

if( confirm('do you want to see this?') ) {
    //show them.
}

Any confirm() solution that you work-up that can be styled won't be able to be included in an if statement. If you want code to only execute when the confirm is clicked, then you need to make that code as a callback, which make the above code look more like this:

mySpecialConfirm('do you want to see this?', function() {
    //show them
} );

Then, you have to wire that function call into the "ok" button click on the confirm dialog that you create. This means that it's inherently more complicated just from a coding standpoint not to mention the code that has to wire that up to an HTML form. I would say that it's not worth it to re-invent the wheel and make your own modal. This means that you need to choose jQuery and jQuery UI, or jQuery and Bootstrap, or Dojo Toolkit, etc., and then from there look for the solution that they have for doing this, or use their modals.

Styling a jquery CONFIRM box

Confirm boxes can not be styled with css, as your CSS tag suggests. Your best bet is to go with a jQueryUI dialog box. In fact, there is a specific example of what you are trying to do on the jQueryUI page.

Change the styling of default alert box

You can't. They are native to the browser and are not styl-able.

You should turn to javascript alert-like systems. Using jQuery, here are some:

• jAlert
• jQuery UI dialog (with some tweaking)
• This page proposes three alternatives to native alert/confirm/prompt

This answer shows a way to have a confirm-like blocking dialog using jquery ui dialog

How do I style the alert box with CSS?

Try jQuery UI located here: http://jqueryui.com/demos/dialog/

They have a theme roller where you can style the dialog and modal boxes.

-- EDIT --

Answering your second question.

Check out the jsFiddle here: http://jsfiddle.net/8cypx/12/

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />

<div onclick="check_domain_input()">Click</div>

<div id="dialog" title="Attention!" style="display:none">
    Please enter a domain name to search for.
</div>

<script>
    function check_domain_input()
    {        
        $( "#dialog" ).dialog(); // Shows the new alert box.

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0)
        {
            return true;
        }

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

        return false;
    }
</script>

​

Styling message box

You cannot apply styles to confirm or alert boxes since they will be different to respective browsers and they cannot be overridden. You will find plenty of jquery plugin to do this task. One of them which is my personal best for these kind of requirements is Sweet-Alert plugin which has lot of options and for your requirement, it can be implemented as below:

Steps

---

• Download the files
• Include necessary Sweet-Alert reference files.

Example

<link rel="stylesheet" type="text/css" href="sweetalert.css">
<script src="sweetalert.min.js"></script> 

• Modify your click event to include Sweet-Alert

Example

$("a[data-post]").click(function (e) {
    e.preventDefault();
    var $this = $(this);
    var message = $this.data("post");
    swal({   
       title: "Are you sure?",   
       text: message,  //Your message here
       type: "warning",   
       showCancelButton: true,   
       confirmButtonColor: "#DD6B55",   
       confirmButtonText: "Yes",   
       closeOnConfirm: false 
     }, function(){
        //this gets executed if user hits `Yes`
        $("<form>")
         .attr("method", "post")
         .attr("action", $this.attr("href"))
         .appendTo(document.body)
         .submit();
        });
      });
});

---

Related Topics