JavaScript onmouseover警報

這是我的代碼，當我將鼠標懸停在圖像上時，警告就會出現;JavaScript onmouseover警報

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的。

任何幫助，非常感謝。

來源

2013-04-22 Keith Burton

搜索模態窗口。 jQuery UI有一些你可以使用的。或者你可以用絕對定位的div製作你自己的。 – Paulpro 2013-04-22 00:43:39

對不起忘了添加我試圖不使用jQuery – 2013-04-22 00:53:20

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

這是創建自己的模式窗口一個很好的資源。您可以使用您的功能來激發您創建的模式窗口，而不是僅使用alert（）來啓動標準警報。

來源

2013-04-22 00:46:32

這是否會用普通的HTML和CSS作爲標題在網站上說HTML5和CSS3？ – 2013-04-22 00:55:56

我不這麼認爲。對不起 – 2013-04-22 04:12:52

你想把你的消息引導到一個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容易。

這是你想到的嗎？

來源

2013-04-22 00:59:48

不完全是，只有當我把鼠標懸停在特定的圖像上時纔會出現警告，但是我想通過JS只使用jQuery和HTML。因爲我現在所擁有的是當我將鼠標懸停在圖像上時，它顯示出正常的警報框，我想用自己的警報框替換正常的警報框。這是我的網站目前的工作http://www.numyspace.co.uk/~unn_w12001251/accommodation.html – 2013-04-22 01:09:39

似乎你想要的是一個燈箱？哇，試圖用直JS來做到這一點。無論如何，我不知道這樣做，因爲JS不創建HTML或CSS。你需要做的是創建一個函數來代替觸發燈箱的警報消息。這是現代技術，您的用戶會更喜歡它。這裏有一個簡單的解決方案的網站... http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/ – 2013-04-22 01:42:38

作爲我提到了添加document.getElementById（「mySpecialOffer）.innerHTML ='

...

';你可以添加所有你想要的html和樣式，我會編寫一個關閉按鈕和另一個JS關閉新的div。您將需要添加CSS來設計新的div，使其看起來像是一個彈出窗口。以上鍊接就是一個很好的例子。讓我知道這是否有助於你走上正軌。同樣，不確定任何straigt JS方法，因爲您需要動態添加HTML和使用CSS添加樣式。 – 2013-04-22 01:49:14

你應該做的是打開一個全新的窗口，就像一個帶有該消息的小網頁。那將是最簡單的方法！
這裏是一個鏈接：http://www.w3schools.com/jsref/met_win_open.asp
當人們將鼠標懸停在圖像上時，您將希望激活window.open（）。
您可以指定窗口的大小和位置，在這種情況下，屏幕的中心和一個小窗口。
希望有所幫助！

來源

2013-04-22 01:23:39 Shadowpat

不，我不想打開一個新窗口那不是我想要的。我有它現在我想要它，但我想我自己的警報框不是默認的。 – 2013-04-22 01:35:44

這實際上是最簡單的解決方案。你想要的是一個燈箱，但是打開一個新窗口要複雜得多。 JS中沒有任何東西會給出一個彈出窗口，您可以對Keith進行樣式設置，除非您使用更加複雜的lightbox，然後使用彈出窗口。 – 2013-04-22 01:45:04

謝謝@ShawnAltman這就是我的意思，我不知道如何解釋它！ – Shadowpat 2013-04-23 19:46:43

JavaScript onmouseover警報

回答

相關問題