試圖創建一個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