3

这是我将鼠标悬停在图像上时使警报出现的代码；

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!');
        }
    }

我想知道如何将它从沼泽标准 JS 警报更改为我可以设置样式的框，我想我会使用某种 div。

任何帮助深表感谢。

4

3 回答 3

2

您想将您的消息定向到 div 吗？

创建 div

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

然后，在您的 js 中，您可以定位此 id 并使用您想要的任何消息进行更新。

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

您甚至可以将 div 隐藏在 css 中，然后使用 JS 取消隐藏。

或者您可以创建 HTML ...

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

使用 jQuery 就更容易了。

这是你的想法吗？

于 2013-04-22T00:59:48.690 回答
2

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

这是创建您自己的模态窗口的好资源。您可以使用您的函数来触发您创建的模式窗口，而不仅仅是使用 alert() 来触发标准警报。

于 2013-04-22T00:46:32.763 回答
1

您应该做的是打开一个全新的窗口，例如带有该消息的小网页。那将是最简单的方法！
这是一个链接：http
://www.w3schools.com/jsref/met_win_open.asp 当人们将鼠标悬停在图像上时，您将希望激活 window.open()。
您可以指定窗口的大小和位置，在本例中为屏幕中心和一个小窗口。
希望有帮助！

于 2013-04-22T01:23:39.957 回答