<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>
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>
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.
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>
Edited to include proper format for more readable and understandable code. Also fixed to where the proper placement for ideal performance with the Javascript files are added to the ending of the <html> tag opposed to the <head> tag
<!DOCTYPE html>
<html>
<head>
<title>ROWLANDS SHOP</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=no">
</head>
<body>
<div class="modal fade details-1" id="details-modal" tabindex="-1"
role="dialog" aria-labelledby="details-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" onclick="closeModal()"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" class="text-center"><?=
$product['title'];?></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="center-block"></div>
<img src="<?= $product['image'];?>" alt="<?
=$product['title'];?>" class="details img-responsive">
</div>
<div class="col-sm-6">
<h4>Details</h4>
<p><?= $product['description'];?></p>
<hr>
<p>price: $<?= $product['price'];?></p>
<p>Brand:<?= $brand['brand']; ?></p>
<form action="add_cart.php" method="post">
<div class="form-group">
<div class="col-xs-3">
<label for="quantity">Quaantity:</label>
<input type="text" class="form-control" id="quantity"
name="quantity">
</div>
</div>
<div class="form-group">
<label for="size">Size:</label>
<select name="size" id="size" class="form-control">
</select>
<option vaue=""></option>
<?php foreach($size_array as $string){
$string_array = explode(':', $string);
$size = $string_array[0];
$quantity = $string_array[1];
echo '<option
vaue="'.$size.'">'.$size.'('.$quantity' Avaliable)</option>';
} ?>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default"
onclick="close_modal();">Close</button>
<button class="btn btn-warning" type="submit"
class="glyphicon glyphicon-shopping-cart"><span>Add to Cart</span></button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</html>
Is other styles from Bootstrap Working? And could you please give more information such as where you are including the Javascript and Popper.js? I'm sorry but there is so much little information that is given that it could simply just be it's not loading Bootstrap into the project. Please revise and add some more information that can possibly help us debug this for you.
Here is the boilerplate for a modal in bootstrap and a trigger with a button. Take this and see if this works for you and then you can re-add the other components you had to it. If this doesn't open up a modal then it might just be a loading problem with Bootstrap.js.
<!-- Button trigger modal -->
<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>
Here is the link to the official Bootstrap Documentation. https://getbootstrap.com/docs/4.4/components/modal/
Also Please note that the code you have provided is missing the required Popper.js file. Please Add this code above the ending <html> tag.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
If you simply don't want to use the online versions of the Bootstrap.js, Jquery.js, or Popper.js Here are the websites where you can find them and download them to easily extract to your project.
Jquery Code Uncompressed: https://code.jquery.com/jquery-3.4.1.js - Just save this into a file called jquery.js and include it with a script tag
Bootstrap.js: Can be downloaded from the official Bootstrap Website - https://www.getbootstrap.com
Popper.js: https://popper.js.org/ - Can be downloaded here
Also please read the StackOverflow Guide to asking a good question you can find here at: https://stackoverflow.com/help/how-to-ask