style a JavaScript onmouseover alert

Question

This is my code to make the alert appear when i hover over the image;

var special_offers = document.getElementsByClassName("special_offer");

//for each special offer
for(i=0;i<special_offers.length;i++){
    var special_offer = special_offers[i];
    special_offer.setAttribute("offer_shown", "0");

    special_offer.onmouseover = function(){
        if( this.getAttribute("offer_shown") == "0" ){
            this.setAttribute("offer_shown", "1");

            alert('This room has the special offer attached to it, please book soon before you miss out!');
        }
    }

I wanted to find out how i change this from the bog standard JS alert to a box that i can style, i imagine i'd use some sort of a div.

Any help is much appreciated.

Answer 1

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

This is a good resource for creating your own modal window. You can use your function to fire the modal window you created instead of just using alert() to fire up the standard alert.

Answer 2

Do you want to direct your message to a div?

Create the div

<div id="mySpecialOffer">
   Some Text gets updated
</div>

In your js you could then target this id and update with what ever message you would like.

document.getElementById("mySpecialOffer").innerHTML = 'some Text';

You could even hide the div in css and then unhide with the JS.

Or you can create the HTML...

document.getElementById("mySpecialOffer").innerHTML = '<div> Special Offer Div Inserted </div>';

This is even easier with jQuery.

Is this what you had in mind?