jquery - 单击按钮时打开模态区域

Question

看这个，我想点击查看地图在图像上方打开一个模式，宽度为 488 像素，高度为 360 像素，右上角有关闭按钮。

谁能帮我？

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

You can do this using jQuery UI.

.dialog() in jQuery UI, is the modal structure with close button.

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

Check this JSFiddle