[英]jquery Bootstrap two modals on same page conflict
我在同一頁面上有兩個模態。
我遇到的問題是我無法在第二個模態中輸入任何內容。
我有以下HTML:
<section class="border"> <a href="#">
<button id="stop_button">Stop</button>
</a> </section>
<!-- 1st popup : INFO -->
<div class="modal custom fade" id="trackModal" tabindex="-1"
role="dialog" aria-labelledby="trackModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>
Hello
</h3>
</div>
<div class="modal-body">
<p>This is a test</p>
</div>
<div class="modal-footer">
<div class="btnmodal" data-dismiss="modal" id="close">Close</div>
</div>
</div>
</div>
</div>
<!-- 2nd popup : EMAIL REQUEST -->
<div class="modal custom2 fade" id="trackModal1" tabindex="-1"
role="dialog" aria-labelledby="trackModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
</button>
<h4>
Type you email
</h4>
</div>
<div class="modal-body">
<p> Please enter your email below
</p>
<form class="contact-form row-form" name="e-mail">
<div class="form-field col-form x-100">
<input id="email" class="input-text js-input" type="email"
required name="email"> <label class="label" for="email">E-mail</label>
</div>
<div class="form-field col-form x-100 text-center"
id="button_form">
<input class="submit-btn" type="submit" value="Submit"
id="button_form2" onclick=" proceed2();">
</div>
</form>
</div>
<div class="modal-footer email-popup"></div>
</div>
</div>
</div>
CSS:
.modal.custom .modal-content {
position: relative;
background: #ECC1CE;
border-radius: 10px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
border: solid 2px white;
margin-top: 120px;
}
.modal.custom2 .modal-content {
position: relative;
background: #ECC1CE;
border-radius: 10px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
border: solid 2px white;
margin-top: 90px;
}
jQuery:
/* first modal */
setTimeout(function() {
$('#trackModal').modal('show');
}, 800);
/* second modal */
$("#stop_button").on("click", function() {
setTimeout(function() {
$('#trackModal1').modal('show');
$('body').find('#trackModal1').focus();
}, 1000);
});
我假設兩個模態之間存在沖突。 我認為第一個是“隱藏”第二個,因此我無法輸入第二個。 因此,我嘗試將電子郵件模式的代碼放在第一個模態的頂部,但它沒有改變任何東西。
你知道這里有什么問題嗎?
謝謝。
我已將您的代碼添加到小提琴中,它似乎工作得很好http://www.bootply.com/DrGHmstG8g
檢查其余的javascript,因為問題可能與其他可能限制表單編輯的問題有關。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.