Question

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

任何人都可以帮助我吗？

<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

单击按钮时打开模态区域

1 个答案: