CODEWITHSUNDEEP
javascripthtml
Adriano
Adriano

Reputation: 20041

html in javascript confirm box?

Is it possible to insert HTML code in a JavaScript confirm box?

I just tried & it does not seem to work (I try to add a HTML link), see my code below

<html> 
  <head> 
     <script type="text/javascript"> function show_alert() { confirm(<a href="www.url.com">Link text</a>); } </script> 
  </head>
  <body>
    <input type="button" onclick="show_alert()" value="Show alert box" />
  </body>
</html>

I suspect I might have to use a library such as "jquery-ui's dialog" to get this working

Upvotes: 17

Views: 29310

Answers (5)

rishi
rishi

Reputation: 369

If you can use Jquery please try below code, this can give you possibility to make code work according to your requirement.

function definition in javascript:

<script>
        function ConfirmMessage(title, message) {
            $('#confirmboxpopup').fadeIn(500, function () {
                $('#confirmbox').animate({ 'top': '100px' }, 50);
            });
            $('#confirmboxtitle').html(title);
            $('#confirmboxmessage').html(message);
            $('#confirmbox').show(50);
            $('#confirmboxok').attr('onclick', okFunction());
            $('#confirmboxcancel').attr('onclick', onCancelClickFunction());
        }

        function okFunction()
        {
           'enter code here to implement next step if user agree'
        }

        function onCancelClickFunction()
        {
           'enter code here to fadeout for id #confirmboxpopup to remove popup.'
        }
</script>

Define tags in HTML with id:

<div id="confirmboxpopup" class="confirmboxpopup" style="display: none"></div>
<div id="confirmbox" class="confirm_message">
        <div id="confirmboxtitle" class="title"></div>
        <div id="confirmboxmessage" class="message"></div>
        <div id="confirmbuttons" style="float: right; padding-top: 7px">
            <button id="confirmboxok" type="button">ok</button>
            <button id="confirmboxcancel" type="button">cancel</button>
        </div>
    </div>

Calling function: you only need to call ConfirmMessage with parameters like "ConfirmMessage(title, message)".

Upvotes: 1

mx0
mx0

Reputation: 7133

You can only insert plaintext to alert(), confirm() and prompt() boxes.

Upvotes: 17

DaveB
DaveB

Reputation: 9530

HTML will not be parsed and displayed in a confirm box.

Upvotes: 2

heinrich5991
heinrich5991

Reputation: 2983

No, it isn't possible with the alert function.

However, if you want confirm boxes with html code, you could add a <div> with an absolute position on the screen, which can contain any html you want.

Upvotes: 4

bPratik
bPratik

Reputation: 7018

It is not possible to include HTML in js confirm boxes.

You are right in thinking you will have to use a dialog jquery plugin.

To get an effect similar to confirm/alert boxes, you will have to create Modal dialog boxes.

Upvotes: 3

Related Questions