Question

这是我的代码，当我将鼠标悬停在图像上时会显示警告;

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。

非常感谢任何帮助。

Answer 1

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

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

Answer 2

您想将消息发送给div吗？

创建div

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

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

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

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

或者您可以创建HTML ...

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

使用jQuery更容易。

这是你的想法吗？

Answer 3

你应该做的是打开一个全新的窗口，就像一个带有该消息的小网页。这将是最简单的方法！
这是一个链接：http://www.w3schools.com/jsref/met_win_open.asp
当人们将鼠标悬停在图像上时，你会想要激活window.open（）。你可以指定窗口的大小和位置，在这种情况下是屏幕的中心，还有一个小窗口。
希望有所帮助！

设置JavaScript onmouseover警报

3 个答案: