Question

Example Of One我正在尝试创建一个弹出窗口，当用户点击弹出窗口内的按钮时，它会将它们带到一个全新的弹出窗口。我似乎找不到正确的HTML脚本。所以我想知道是否有人有任何想法！

Answer 1

使用Foundation和嵌套模态，这是可能的。

$(document).foundation();

<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js" type="text/javascript"></script>

<a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>

<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal" data-reveal>
  <h2>This is a modal.</h2>
  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
  <a class="close-reveal-modal">&#215;</a>
</div>

<div id="secondModal" class="reveal-modal" data-reveal>
  <h2>This is a second modal.</h2>
  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

笔：http://codepen.io/anon/pen/rOdPqK

Answer 2

另外..您可以使用自定义模式div来完成，其中不需要任何其他插件也可以按照您希望的方式进行完全样式自定义，并且可以包含任何类型的内容..如下面的代码所示：{ {3}}

$('.modal a').on('click', function (evt) {
    evt.preventDefault();
});

$('.open-modal').on('click', function (evt) {
    evt.preventDefault();
    $('#overlay').show();
});
$('.modal-close').on('click', function () {
    $('#overlay').hide();
    $('#modal1').show();
    $('#modal2').hide();
});

$('#modal2').hide();
$('#pg1btn1').on('click', function () {
    $('#modal2').show();
    $('#modal1').hide();
});
$('#pg2btn1').on('click', function () {
    $('#modal1').show();
    $('#modal2').hide();
});
$('#pg2btn2').on('click', function () {
    $('#overlay').hide();
    $('#modal1').show();
    $('#modal2').hide();
});

#overlay {
    display:block;
    width:100%;
    height:100%;
    z-index:100;
    position:fixed;
    top:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.5);
    font-family:verdana, sans-serif;
}
.modal {
    display:block;
    width:400px;
    height:250px;
    position:fixed;
    top:calc(50% - 100px);
    left:calc(50% - 200px);
    background-color:#EEE;
    border:2px #AAA solid;
    border-radius:5px;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);
    font-size:24px;
    padding:5px;
}
.modal-head {
    display:block;
    height:30px;
    padding:5px;
    font-weight:bold;
    text-align:right;
}
.modal-head a {
    text-decoration:none;
    display:inline-block;
    width:15px;
    height:15px;
    margin-right:5px
}
.modal-action {
    display:block;
    background-color:#DDD;
    width:60px;
    position:absolute;
    left:calc(50% - 30px);
    margin-top:10px;
    bottom:10px;
    padding:5px 10px;
    border:2px #CCC solid;
    border-radius:5px;
    text-align:center;
    cursor:pointer;
    text-decoration:none;
}
.modal-action:hover {
    background-color:#BBB;
    border-color:#999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Crema crema chicory viennese sugar medium, rich mazagran americano aftertaste cinnamon rich. Filter, frappuccino that decaffeinated siphon caffeine so sit dripper. French press shop carajillo cappuccino mocha medium white lungo.</div>
<div><a href="" class="open-modal">Activate Modal</a>
</div>
<div id="overlay">
    <div id="modal1" class="modal">
        <div class="modal-head"><a href="" class="modal-close">x</a>

        </div>
        <div class="modal-body"><strong>Page ONE: </strong>Ristretto spoon galão bar, lungo siphon whipped variety seasonal half and half. Dripper plunger pot saucer crema extraction filter arabica. <a href="" id="pg1btn1" class="modal-action">Next</a>

        </div>
    </div>
    <div id="modal2" class="modal">
        <div class="modal-head"><a href="" class="modal-close">x</a>

        </div>
        <div class="modal-body"><strong>Page TWO: </strong>Roast, steamed, robust, chicory qui kopi-luwak, cappuccino, roast half and half cappuccino aromatic variety. Rich a mazagran qui cup barista chicory. <a href="" id="pg2btn1" class="modal-action" style="left:100px">Prev</a><a href="" id="pg2btn2" class="modal-action" style="left:250px;border-color:red;color:red;">Close</a> 
        </div>
    </div>
</div>

尝试创建J-Query弹出重定向到另一个弹出窗口

2 个答案: