[英]Show modal content from another page within same pages popup
類似的問題已經發布過,但沒有一個解決我的問題。 我正在嘗試讓enrollments.php頁面顯示為index.php頁面內的模式彈出窗口
的index.php
<button class="sess_btn sess_btn1" id="btn_enrol">Enrollments</button>
<div id="enrolModal"></div>
<script>
$(document).ready(function() {
//button modal
$('#btn_enrol').click(function(){
//using ajax post
$.post('enrollments.php',function() {
$('#enrolModal').html(); //Fill DIV enrolModal with enrollments.php content
})
//Calling Modal
$('#myModal').modal('show');
})
})
//-------------
</script>
enrollments.php
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
另外,當我嘗試多次單擊按鈕時,瀏覽器窗口會快速閃爍。 任何幫助將不勝感激,謝謝。
是否在代碼中進行了更正,以正確使用jquery API。 未經測試,但是下面的代碼可以工作。
<script>
$(document).ready(function() {
//button modal
$('#btn_enrol').click(function(){
$.post( "enrollments.php", function( htmlContents ) {
$('#enrolModal').html( htmlContents );
//Show the Modal once you get enrollments.php html contents
$('#myModal').modal('show');
});
})
})
//-------------
</script>
感謝您的回答,我做的有點不同。 我使用按鈕代替了按鈕,如圖所示。
的index.html
<script>
$(document).ready(function() {
$('.li-modal').on('click', function(e){
e.preventDefault();
$('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
})
});
</script>
<a href="enrollments.php" class="li-modal" id="enrol_link" onMouseOver="this.style.background='rgb(0,66,79)'" onMouseOut="this.style.background='#4CAF50'">Enrollments</a>
<div class="modal fade text-center" id="theModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
enrollments.php
<script>
// Get the modal
var modal = document.getElementById('theModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
window.location.href = "updatesession.php";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
window.location.href = "updatesession.php";
}
}
</script>
<div id="model-content">
<div class="modal-header">
<span id="close" class="close">×</span>
<p>Session Editor</p>
</div>
<div class="modal-body">
<p>Select Session: </p>
</div>
<div class="modal-footer">
<p>Modal Footer</p>
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.