打開模態區域點擊按鈕

Question

看這個，我想去點擊查看地圖打開一個模式上方的圖像寬度488px和高度360px與關閉按鈕在右上角。

任何人都可以幫助我嗎？

http://jsfiddle.net/vyCvP/

<div class="article"> 
<div class="desc"> 
    <h3 class="title">Beaver Galleries</h3> 
    <ul> 
     <li>81 Denison Street, Deakin 2600</li> 
     <li>www.beavergalleries.com.au</li> 
     <li>Tel 02 6282 5294 Fax 02 6281 1315</li> 
     <li>mail@beavergalleries.com.au</li> 
    </ul> 
    <p>Directors: Martin and Susie Beaver (ACGA)Canberra’s largest private gallery. Regular exhibitions of contemporary paintings, prints, sculpture, glass and ceramics by established and emerging Australian artists.</p> 
    <p class="last">Tue - Fri 10 - 5, Sat - Sun 9 - 5</p> 
    <a href="" class="view-map">View Map</a> 
</div> 
<img src="http://fakeimg.pl/488x360/" /> 

Answer 1

可以使用jQuery UI做到這一點。

在jQuery UI的.dialog()，是模態結構具有關閉按鈕。

$(document).ready(function() { 
    var modal = document.createElement('div'); //create a MODAL window 
    $('.view-map').on('click', function() { 
    $(modal).dialog(); 
    }); 
}); 

入住這JSFiddle