试图创建一个J查询弹出重定向到另一个弹出

Question

Example Of One我想创建一个弹出窗口，当用户点击弹出窗口中的按钮时，它将他们带到一个全新的弹出窗口。我似乎无法找到正确的HTML脚本。所以我想知道如果有人有任何想法！

Answer 1

还..你可以用自定义模式div这里不需要任何其他的插件也充满风格的定制你想要的方式和做可以包括任何类型的内容..如下面的代码：JSFIDDLE

$('.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>

Answer 2

有了基础和嵌套模态，这是可能的。

$(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