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>
Related
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.
enter image description here
this is my laravel blade code, I want to show the popup on the same page, it is showing also. But it is not clickable, and shows fade model can anyone suggest me to do another method, as I have tried other's method also. Thank you in advance.
#foreach($popup as $pop)
<div class="popup col-md-3">
<div class="contain">
<img src="{{ $pop->front_layout }}" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<a class="btn btn-warning" data-toggle="modal" data-target="#myModal">Preview</a>
</div>
</div>
{{--<div class="pops" id="{{ $pop->id }}">
{!! $pop->website !!}
</div>--}}
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endforeach
Your modals don't have a unique id.
<a class="btn btn-warning"
href="#loginbutton"
data-toggle="modal"
data-target="#myModal-{{ $pop->id }}">Preview</a>
<div id="myModal-{{ $pop->id }}"
class="modal fade"
role="dialog">
As for the visualization problem you've got two possible fixes:
Add a high z-index value to your modal.
<div id="myModal-{{ $pop->id }}"
class="modal fade"
role="dialog"
style="z-index: 10000; /* adjust as needed */">
Add enough top margin to your modal to avoid having it overlap with the navbar
<div id="myModal-{{ $pop->id }}"
class="modal fade"
role="dialog"
style="margin-top: 20rem /* adjust as needed */;">
Make sure your modal is actually at the end of the page and has no parent elements besides the </body> tag
<body>
....
<div class="modal fade" ...></div>
<script ...>...</script>
<script ...>...</script>
<script ...>...</script>
</body>
try to change modal css "top" value,
Maybe this can help
.modal {
top: 120px;
}
Or change .modal-dialog css
.modal-dialog {
margin: 100px auto; }
This is my modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">text</h4>
</div>
<div class="modal-body">
<p>Done!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Okay</button>
</div>
</div>
</div>
This is my link:
<a class="btn btn-success" href="http://example.com" data-toggle="modal" data-target="#myModal">Text</a>
When I click to the button the modal is activating but I cannot see anything from it just the screen got darker.
Could you please help me what am I doing wrong?
First you need show button, then module code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<a class="btn btn-success" href="http://example.com" data-toggle="modal" data-target="#myModal">Test</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">text</h4>
</div>
<div class="modal-body">
<p>Done!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Okay</button>
</div>
</div>
</div>
</body>
</html>
<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.