I want to display some text in confirm box as bold letters. Please find the fiddle : / 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.

I want to display some text in confirm box as bold letters. Please find the fiddle : http://jsfiddle/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.

• javascript
• jquery
• html

• 2 You cannot do this in a system generated box. They are managed and styled by the operating system/browser. – Mouser Commented Jan 15, 2015 at 19:11
• It maybe duplicate with stackoverflow./questions/7853130/… – Lumi Lu Commented Jan 15, 2015 at 19:24
• Unfortunately not possible in a system generated message box, which is what you are doing. – SearchForKnowledge Commented Jan 15, 2015 at 19:56

4 Answers 4

As others have stated the style is handled by the browser but you could create your own. Heres the fiddle: http://jsfiddle/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>

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.

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 remend 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.

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

function test(){
  var msg = "Please click