问JQuery SimpleModal -内部链接？
EN

Stack Overflow用户

提问于 2012-11-06 00:10:17

回答 1查看 346关注 0票数 1

我设法使用simplemodal插件让多个模式窗口工作，但我需要能够在它们之间切换，而不需要用户首先手动关闭它。

在这一点上，我仍然在通过示例来学习。我看过一些关于这个问题的其他参考资料，但提供的解决方案要么不起作用，要么不是从相同的构建块开始的。

任何提示或建议都非常感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleModal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script>
jQuery(function ($) {
    $('#basic-modal .link1').click(function (e) {
        $('#link1-modal-content').modal();
        return false;
    });

    $('#basic-modal .link2').click(function (e) {
        $('#link2-modal-content').modal();
        return false;
    });

    $('#basic-modal .link3').click(function (e) {
        $('#link3-modal-content').modal();
        return false;
    });
});
</script>
<style>
#simplemodal-overlay {background-color:#000; cursor:wait;}
</style>
</head>

<body>

<!-- MAIN PAGE / LINKS TO MODAL WINDOWS-->
<div id='basic-modal'>
    <a href="#" class="link1" id="pop1">Link to Content 1</a><br />
    <a href="#" class="link2" id="pop2">Link to Content 2</a><br />
    <a href="#" class="link3" id="pop3">Link to Content 3</a><br />
</div>



<!-- INDIVIDUAL MODAL WINDOWS CONTENT  -->
<div id="link1-modal-content" style="display:none; width:200px; height:200px; background-color:#FFFFFF;">
    <p>Content 1</p>
    Content 1<br />
    <a href="#" class="link2" id="pop2">Link to Content 2</a><br />
    <a href="#" class="link3" id="pop3">Link to Content 3</a><br />
</div>

<div id="link2-modal-content" style="display:none; width:200px; height:200px; background-color:#FFFFFF;">
    <p>Content 2</p>
    <a href="#" class="link1" id="pop1">Link to Content 1</a><br />
    Content 2<br />
    <a href="#" class="link3" id="pop3">Link to Content 3</a><br />
</div>

<div id="link3-modal-content" style="display:none; width:200px; height:200px; background-color:#FFFFFF;">
    <p>Content 3</p>
    <a href="#" class="link1" id="pop1">Link to Content 1</a><br />
    <a href="#" class="link2" id="pop2">Link to Content 2</a><br />
    Content 3<br />
</div>


</body>
</html>

simplemodal

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-11-06 00:38:04

SimpleModal只允许在任何时候打开一个模式，因此你需要关闭任何现有的模式，然后打开一个新的或交换它们的内容。

要打开/关闭，请使用以下代码代替您的javascript：

function closeAllModal() {
    $.modal.close();
}

jQuery(function ($) {


    $('.link1').click(function (e) {
        closeAllModal();

        $('#link1-modal-content').modal();
        return false;
    });


    $('.link2').click(function (e) {
        closeAllModal();

        $('#link2-modal-content').modal();
        return false;
    });

    $('.link3').click(function (e) {
        closeAllModal();
        $('#link3-modal-content').modal();

        return false;
    });
});

我已经将点击选择器更改为通用的，以便它绑定到所有链接，并添加了一个调用，以在每个链接中打开之前关闭通道。这应该会给你想要的效果。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13235943

复制

相似问题

问JQuery SimpleModal -内部链接？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery SimpleModal -内部链接？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery SimpleModal -内部链接？
EN