Question

我希望根据http://www.paulrhayes.com/2011-03/css-modal/实现一个模式框，以便在单击SVG文档中的元素时打开。

这是一个示例代码：

<svg ...>
<g id="ra">
    <a xlink:href="#r1" class="openModal">
        <g id="r">
            <rect x="136.63" y="98.893" fill="#000000" width="58.79" height="91.313"/>
        </g>
    </a>
</g>
</svg>
<aside id="r1" class="modal">
    <div>
        <h2>Modal box</h2>
            <p>Lorem Ipsum</p>
            <a href="#close" title="Close">Close</a>
    </div>
</aside>

嗯，正如你猜测的那样。此代码无效。也许你可以帮忙吗？非常感谢。

Answer 1

你刚忘了包括css吗？一旦你这样做，它对我有用。

<!DOCTYPE html>
    <html>
        <link rel="stylesheet" type="text/css" href="http://www.paulrhayes.com/experiments/modal/css/experiment.css"/>
        <svg>

        <a xlink:href="#r1" class="openModal">
            <g id="r">
                <rect x="136.63" y="98.893" fill="#000000" width="58.79" height="91.313"/>
            </g>
        </a>
    </g>
    </svg>
    <aside id="r1" class="modal">
        <div>
            <h2>Modal box</h2>
                <p>Lorem Ipsum</p>
                <a href="#close" title="Close">Close</a>
        </div>
    </aside>
    </html>

从SVG文档中的链接打开CSS模式框

1 个答案: