圖像地圖中的jQuery彈出窗口

我想構建一個圖像地圖並根據點擊的圖像地圖區域調用jQuery彈出窗口。這可以做到嗎？圖像地圖中的jQuery彈出窗口

與本教程類似的東西，除了href會調用jQuery popup =「＃MyPopupName」。 HTML <area> href Attribute Example

這裏是我到目前爲止（不工作）：

<div data-role="content" class="ui-content" data-theme="a"> 
    <p>Hello, this is the CONTINENTS navigation page.</p> 

    <a href="#Popup_NAmerica" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Click for N America</a> 
    <p><img src="Assets/images/World_Map_1930_Continents.png" width="1024" height="553" alt="Continents Map" usemap="imgmap_continents" /> </p> 

    <!-- href map --> 
    <map name="imgmap_continents"> 
     <area shape="rect" coords="12,38,279,270" href="#Popup_NAmerica" /> <!--N America popoup --> 
     <area shape="rect" coords="126,289,327,548" href="#Popup_SAmerica" /> <!--S America popup --> 
     <area shape="rect" coords="849,371,1007,498" href="#Popup_SAmerica" /> <!--Australia popup --> 
     <area shape="poly" coords="379,176,564,180,643,294,641,468,481,471,473,330,389,318,423,420" href="#Popup_Africa" /> <!--Africa popup --> 
     <!-- Europe, Asia, Antartica go here --> 
    </map> 


    <!-- POPUPS --> 

    <div data-role="popup" id="Popup_NAmerica" class="ui-content"> 
     <h3>North America</h3> 
     <p>This is where there will be both an <strong>ON</strong> and <strong>OFF</strong> button for this country.</p> 
    </div> 
    <div data-role="popup" id="Popup_SAmerica" class="ui-content"> 
     <h3>South America</h3> 
     <p>This is where there will be both an <strong>ON</strong> and <strong>OFF</strong> button for this country.</p> 
    </div> 
    <div data-role="popup" id="Popup_Australia" class="ui-content"> 
     <h3>Australia</h3> 
     <p>This is where there will be both an <strong>ON</strong> and <strong>OFF</strong> button for this country.</p> 
    </div> 
    <div data-role="popup" id="Popup_Africa" class="ui-content"> 
     <h3>Africa</h3> 
     <p>This is where there will be both an <strong>ON</strong> and <strong>OFF</strong> button for this country.</p> 
    </div> 
    <!-- Europe, Asia, Antartica go here --> 
    <!-- /POPUPS --> 
</div>

這裏是一個的jsfiddle：https://jsfiddle.net/a0wnvuxk/

來源

2015-11-11 DaveK

歡迎SO！與你預期的行爲相比，這將是值得詳細說明什麼是不正確的。一個非常好的做法是在線重現問題（例如[jsfiddle]（http://jsfiddle.net/）），以便人們可以直接修改代碼併爲您提供工作解決方案。 – ghybs

這裏是jsfiddle：https：//jsfiddle.net/a0wnvuxk/ – DaveK

你有一個不正確的usemap屬性入手：有一個在地圖名稱之前丟失散列#。

然後，似乎jQuery Mobile自動附加彈出窗口打開功能只在a鏈接，而不是在area的。因此，你必須自己創建一個事件偵聽器：

$("area", "map[name='imgmap_continents']").click(function (event) { 
    event.preventDefault(); 

    var href = $(this).attr("href"); 

    // See jQuery Mobile Popup API 
    // https://demos.jquerymobile.com/1.2.0/docs/pages/popup/ 

    // Use the following instruction to open the popup where it is defined. 
    //$(href).popup("open"); 

    // Use the following instruction to emulate a click on the button 
    // that opens the popup. This will open the popup on top of that 
    // button instead of where it is defined. 
    $("a[href='" + href + "']").click(); 

});

演示：https://jsfiddle.net/a0wnvuxk/9/

來源

2015-11-12 04:56:52 ghybs

圖像地圖中的jQuery彈出窗口

回答

相關問題