I've added bootstrap modal to my website, but it's not working. Someone help me fix it. Thanks.
<button type="button" class="btn btn-info btn-lg">Update</button>
<!-- Modal -->
<div class="modal fade" id="myupdate" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New Update </h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Missing your data-toggle and target
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myupdate">Open Small Modal</button>
You need to set data-target as target id of your modal and data-toggle = "modal" to the button on which you want to activate the modal
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" data-target="#myupdate" data-toggle="modal" class="btn btn-info btn-lg">Update</button>
<!-- Modal -->
<div class="modal fade" id="myupdate" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New Update </h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I have a simple modal here.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
SHOP
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The problem is, when I click on the modal button, the modal fades in perfectly, but all content is either not visible, or does not exist.
The end result looks like this:
I found the issue. It is there, but somewhere in my CSS I have the text changed to white, so it's there, and visible, but just in white.
{% for key,value in config.items %}
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target='#'{{key}}><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
<div class="modal fade" id={{ key}} 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">{{key}}</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>
{% endfor %}
//I want to call each element by {{key}} so that I can display all the values based on the loop value.Please anyone suggest me how to fix this issue
I am trying to open a remote modal window using Bootstrap. The page that opens the modal has the following code.
<a class="test" href="" data-toggle="modal" data-target="#myModal">Test</a>
<div class="modal-container"></div>
<script type="text/javascript">
$(document).ready(function () {
$('.test').click(function () {
$('.modal-container').load(url, function (result) {
$('#myModal').modal('show');
});
});
});
</script>
The remote page has the following code
<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">Modal title</h4>
</div>
<div class="modal-body">
... remote
</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>
The problem that I have is that the first time the modal is called remotely it opens and closes normally but if I want to open it again, it does not close. If the modal (same code) is defined locally it works fine.
Please help
I think that you must close the first div and change role attribute on
<div class="modal-dialog">
try it!
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
... remote
</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>
sample.html: In this page I had a button as below as
<button data-toggle="modal" class="btn btn-info" onclick="location.href='home.html'" data-target="#testModal">button</button>
on click on the above button open a modal named home.cfm and its content as below as
home.html:
<div id="testModal" 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>
but no modal is opening.please help
You have to just need to call a modal-contant data from the home.html file , so put below code in to your sample.html file.
<button class="btn btn-info" onclick="show_modal('home.html','Home page','')">button</button>
<div class="modal fade bs-modal-sm" id="modal" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog animated bounceIn">
<div class="modal-content">
</div>
</div>
</div>
Add one function in to the js file and add reference of that js file in to the sample.html.
function show_modal(target, title, size) {
jQuery('#modal').removeData('bs.modal');
jQuery('.modal-content').html('');
jQuery('.modal-dialog').removeClass('modal-lg');
jQuery('#modal').removeClass('create_event_task');
jQuery('.modal-dialog').addClass(size);
var newTarget = target.indexOf("?") >= 0 ? target + '&modal-title=' + title : target + '?modal-title=' + title;
jQuery('#modal').modal({remote: encodeURI(newTarget)});
}
Add below code in home.html file.
<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>
I hope this will help full to you.
I am having two Bootstrap modal. On returning back to previous modal from second modal it is not visible.Second modal has a file field. On changing the value of file field the second modal should hide and the first modal should be displayed. Can anyone help me out? Following is my try:
<html lang="en">
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal123" data-dismiss="modal">Open Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal123" 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.123</p>
<form action="demo_form.asp">
Select a file: <input type="file" name="img" id="File">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$("#File").change(function(){
$("#myModal123").hide();
$("#myModal").show();
alert("Hello");
})
</script>
</body>
</html>
Thank you in advance.
Please replace your JQuery code to below
$("#File").change(function () {
$("#myModal123").modal("hide");
$("#myModal").modal("show");
})