消息中带有链接的确认对话框？

Question

Sorry if this is a silly question (I am still new to web development), but is it possible to have a link in a basic confirmation dialog message?

Right now, I have a basic confirmation popup

if (confirm("Bunch of text here"))
...

But a customer wants me to add a link in that confirmation box which would open in a new window. Adding html tags in the message doesn't work since it's a message string.

Any suggestions would be appreciated.

Thanks!

Answer 1

You could make a modal and display it like that, or, even simpler, use bootstrap's built in modal.

HTML:

<div class="button">Click</div>

<div class="overlay">

    <div class="modal"></div>

</div>

CSS:

.button {
    background-color: #aa0000;
    color: #fff;
    padding: 5px 40px;
    display: inline-block;
    cursor: pointer;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    height: 100%;
    width: 100%;
    display: none;
    top: 0;
    left: 0;
}
.modal {
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    background-color: #fff;
    position: fixed;
    height: 200px;
    width: 200px;
}

JS:

$(function() {

var button = $('.button'),
    overlay = $('.overlay'),
    message = 'Message text',
    modal = $('.modal');

button.on('click', function() {
    overlay.css('display', 'block');
    modal.html( message + '<a href="http://google.com"' + 'target="_blank">' + 'link' +  '</a>');
});

});

http://jsfiddle.net/HNe95/

Answer 2

That's not possible with the Javascript's confirm function. In order to do that you need a custom modal dialog.

If you use jQuery, you could create one by use one of these: vex , alertify , and apprise to name a few.

If you don't use jQuery, you can create one by applying some CSS and Javascripts for events. You could also follow this guide .