to show text in javascript confirm box as bold letters

Question

I want to display some text in confirm box as bold letters. Please find the fiddle : http://jsfiddle.net/LdmgeLsv/ Below is the code:

<script>
    function test(){
    var msg = "Please click OK to proceed, Cancel to exit..";
    if(confirm(msg)){
    alert("clicked OK");
    }
} 
</script>

<input type="submit" value="submit" onclick="test()"/>

I want to dispaly OK and Cancel as bold letters in the confirm box.

I knew that we cannot apply html bold or strong in javascript, is there any solution to show OK and Cancel in confirm message as bold. Please suggest.

You cannot do this in a system generated box. They are managed and styled by the operating system/browser. — Mouser, Jan 15 '15 at 19:11
It maybe duplicate with http://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box — Lumi Lu, Jan 15 '15 at 19:24
Unfortunately not possible in a system generated message box, which is what you are doing. — SearchForKnowledge, Jan 15 '15 at 19:56

score 2 · Answer 1 · answered Jan 15 '15 at 19:28

As others have stated the style is handled by the browser but you could create your own. Heres the fiddle: http://jsfiddle.net/LdmgeLsv/5/

and the code

<style>
.popup{
    display: none;
    position: absolute;
    width: 400px;
    height: 150px;
    background: #f8f8f8;
    border: 1px solid #e9e9e9;
    box-shadow: 0px 0px 3px #888;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;  
    padding: 10px;
    box-sizing:border-box;
}

.popup button{
    font-weight: bold;       

}
</style>


<input type="submit" value="submit" onclick="test()"/>
<div class="popup">
    <p id="msg">Click OK to do something cool.</p>
    <button id="ok">OK</button><button id="cancel">Cancel</button>
</div>
<script>
    var popup = document.querySelector('.popup');
    var cancel = document.getElementById('cancel');
    var ok = document.getElementById('ok');
    var msg = document.getElementById('msg');
    var initMsg= msg.innerHTML;

    ok.addEventListener('click', function(){
        msg.innerHTML = 'You Clicked Ok';
    });
    cancel.addEventListener('click', function(){
        msg.innerHTML = initMsg;
        popup.style.display = 'none';
    });

    function test(){

    popup.style.display = 'block';


}

</script>

score 1 · Answer 2 · answered Jan 15 '15 at 19:11

1

The styling of the alert box is handled by the browser itself, and cannot be changed via CSS or javascript. If you want more control over how the alert looks, you have to make an HTML element that looks like the alert box. There are a few libraries you can look at, one of which is sweetalert.js.

answered Jan 15 '15 at 19:11

Mike Manfrin

2,722
2
26
41

Apparently that project has moved: https://sweetalert.js.org/guides/ – Markus-Hermann Jun 12 '20 at 15:15

score 1 · Answer 3 · answered Jan 15 '15 at 19:11

The JavaScript alert and confirmation dialogs are system objects. There is no influencing them directly from the source of a webpage. If you need this kind of modified display, I would recommend using a third party tool to handle dialogs of this nature through html elements. The two most popular tools I've seen are jQueryUI and Twitter Bootstrap.

MaxZoom · Answer 4 · 2015-01-15T20:56:32.767

If you truly insist to have a bold text on this dialog, you can try UTF-8 fonts

function test(){
  var msg = "Please click  to proceed,  to exit..";
  if(confirm(msg)) {
    alert("clicked ");
  }
}

However it is not recommended to use JavaScript confirm dialog when interacting with a real user. See this link for more info https://developer.mozilla.org/en-US/docs/Web/API/window.alert

A preferred method to go is to use Jquery UI confirm dialog (or your favorite plugin)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal confirmation</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <style>  
      body {
        font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
        font-size: 62.5%;
      }
    </style>
    <script>
    $(function() {
      $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
          "Delete all items": function() {
            alert('All items deleted');
            $( this ).dialog( "close" );
          },
          Cancel: function() {
            alert('All items remained')
            $( this ).dialog( "close" );
          }
        }
      });
    });
    </script>
  </head>
  <body>

    <div id="dialog-confirm" title="Empty the recycle bin?">
      <p>
        <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        These items will be <b>permanently deleted</b> and cannot be recovered. Are you sure?
      </p>
    </div>  
  </body>
</html>

to show text in javascript confirm box as bold letters

4 Answers4