I have moved to Bootstrap 4 beta 3 but I am facing an annoying issue with modal; the modal after it shows will not close what ever I click.
The Modal remote has been removed with BS4 so I used jquery .load() to load the modal contents once the button is clicked.
Here is my main page:
<div class="container-fluid">
<div class="row">
<div class="col-md-1 sidenav">
<ul>
<?php include("include/menu.inc.php"); ?>
</ul>
</div>
<div class="col-md-11 offset-md-1 p-4">
<h1 class="pb-2">Projects List</span>
<a class="pull-right" title="Add Project" data-toggle="modal" href="#myModal" onClick="loadAddProjectModal()">
<i class="fa fa-plus text-muted" aria-hidden="true"></i>
</a>
</h1>
</div>
</div>
</div>
<!--Modals-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>
this is my code in .js file to load the modal contents:
/* To load modal */
function loadAddProjectModal() {
$("#myModal").load('include/modal_addProject.php');
}
and lastly is the modal content modal_addProject.php:
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Add New Project</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Test</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I have tried this locally using "Wampserver" and it's working as it should be, however after uploading my site to host it will never close, I tried 2 different host providers and both have the same issue.
The modal is opened and then the content is loaded so the close buttons don't have event listeners.
Remove href="#myModal"
or data-target="#myModal"
and manally trigger the modal in the load callback:
function loadAddProjectModal() {
$("#myModal").load('include/modal_addProject.php', function() {
$("#myModal").modal('show');
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.