please help, i have a bootstrap template with this footer , i trying to add a modal but when i click the modal button,the modal doesnt show up , is there any plugin that have not been added in my template ?
<script src="<?= base_url('template/assets/vendor/bootstrap/js/bootstrap.bundle.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/aos/aos.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/php-email-form/validate.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/swiper/swiper-bundle.min.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/purecounter/purecounter.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/isotope-layout/isotope.pkgd.min')?>"></script>
<script src="<?= base_url('template/assets/vendor/glightbox/js/glightbox.min.js')?>"></script>
<!-- Template Main JS File -->
<script src="<?= base_url('template/assets/js/main.js')?>"></script>
and this the modal button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Thank you
Make sure your code contains bootstrap CSS and Bootstrap Js.
Like,
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
If you are using Bootstrap5 than change data-toggle to data-bs-toggle and data-target to data-bs-target.
Related
Hello guys i was trying to make a modal popup using ajax in my laravel project but it's not working,
i tried to make an alert popup and it was working so fine but the modal is not and this is my code
The error is $(...).modal is not a function
<div class="content">
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<a class="edit_click btn btn-warning" >Edit</a>
</div>
<script>
$(function (){
$('.edit_click').click(function (){
$('#editModal').modal('show');
});
});
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css">
here is your code. what is wrong? :)
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="content">
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Hello World
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<a class="edit_click btn btn-warning" >Edit</a>
</div>
<script>
$(function (){
$('.edit_click').click(function (){
$('#editModal').modal('show');
});
});
</script>
</body>
</html>
https://jsfiddle.net/socb29ea/
i have datatable rows have button with array value every thing is ok but iframe not updated inside modal it keeps show the first value inside iframe
how can update source inside modal
<td>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<?php echo base_url('dash/course_price/'.$c->c_id);?>
</button>
<!-- Modal -->
<div
class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
</button>
</div>
<div class="modal-body">
<iframe
src="<?php echo base_url('dash/course_price/'.$c->c_id);?>"
width="100%" height="380" frameborder="0" allowtransparency="true" ></iframe>
</div>
</div>
</div>
js and css :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I had create a php code for doing CRUD application,To-do-list. Then I run it on my browser and it is not pop-up and do nothing, when I click the "Add Task" button.
<button type="button" data-target="#myModal" data-toggle="modal" class="btn btn-success">Add Task</button>
check my full code on codeply.
<!DOCTYPE html>
<html>
<head>
<script>
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"
</script>
<script>
src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity = "sha384-Rc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA712mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin = "anonymous"
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" intergrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg320mUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>CRUD App</title>
</head>
What should I do, Thanks for your help.
You should add <div id="myModal" class="modal" tabindex="-1" role="dialog"> like below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" intergrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg320mUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>CRUD App</title>
<button type="button" data-target="#myModal" data-toggle="modal" class="btn btn-success">Add Task</button>
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<link href="<?php echo base_url(); ?>assets/js/jquery.min.js" type="text/javascript" />
<link href="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript" />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<button class="btn btn-default" data-toggle="modal" data-target="#myModal">
+Add Question
</button></h3>
</div>
<div class="panel-body">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I can't get the modal to open it seems so simple yet its giving a problem.
Please help
You need to use the <script> tag in order in include javascript files in your HTML page.
<script src="<?php echo base_url(); ?>assets/js/jquery.min.js" type="text/javascript"></script>
and
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
Put them right before the body tag closes:
<script src="<?php echo base_url(); ?>assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
</body>
Suppose I have a form with the form id = "form1":
<form id="form1">
<input type="text">
</form>
I'm also displaying a button that allows the user to bring up a modal:
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
Click here to zoom in!
</button>
The challenge is that I want my modal to show the same form (form1), but so far I have not had much luck getting this. Below is my modal code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>This is my header</h3>
</div>
<div class="modal-body">
<!-- I WANT TO ADD THE INPUT FORM THAT EXISTS OUTSIDE THE MODAL HERE -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
Is this possible? If so, how?
If the form and all this mark up is on the same page then put the form tag inside the div with class modal-body if that still does not work use java-script to show the modal. Here is sample working code,
<button class="btn btn-primary btn-sm" data-toggle="modal" id="showModalPopup" data-target="#myModal">
Click here to zoom in!
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">This is my header</h4>
</div>
<div class="modal-body">
<form id="form1">
<input type="text" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#showModalPopup').on('click', function(e) {
e.preventDefault();
$('#myModal').modal('show');
});
});
</script>
I hope it helps.