I have a blogger website; in the homepage (index page) there are blog-posts (thumbnail, title, snippets and "view" button). I need to create a modal that pops-up when the "view" button is clicked. It should show blog-post title, image thumbnail and some other post details.
How to achieve that please ?
I tried java script but the modal shows only one blog-post when click on each "view" button.
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js'/>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#Shop">view</button>
<div id="Shop" aria-hidden="true" aria-labelledby="Shop" class="modal fade in" role="dialog" tabindex="-1" display="block">
<div class="modal-dialog modal-lg">
<div class="modal-content simpleCart_shelfItem">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title"><a expr:href='data:post.href'><data:post.title/></a></h4>
</div>
</div>
</div>
<script>
$('#Shop').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var title = "<data:post.title/>";
var modal = $(this)
modal.find('.modal-title').text(title)
})
</script>
Related
When I loop over my images I have an icon that you can click to delete the image. Instead I'd like to have a modal pop up to confirm the deletion. The only problem is I don't want to repeate the code for the modal for each image. I need a way to pass the image id to the modal.
I was thinking I could pass the id in through an onClick but I'm not sure that will work with the Bootstrap modal.
Here's how I'm currently deleting:
{% for image in images %}
<img src="{{image.image.url}}">
<form method="POST" action="{% url 'products:delete_image>
{% csrf_token %}
<button type="submit" rel="tooltip" title="Remove">
<i class="material-icons">close</i>
</button>
</form>
{% endfor %}
Here's the modal code I'd like to integrate
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" 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>
Assign a click handler to the button inside each form and give each form a unique id. For example, give all the form buttons a class like confirm-delete. Assign a click handler (this is jQuery but you could also use vanilla JS)...
$('.confirm-delete').on('click', function(e) {
// prevent form submit
e.preventDefault();
// get the current image/form id
var id = $(this).attr("id")
// assign the current id to the modal and show the modal
$('#myModal').data('id', id).modal('show');
})
Then inside the modal, have a button that actually performs the delete using the id that is passed through data...
$('#btnDelete').click(function() {
// handle deletion here
var id = $('#myModal').data('id');
// submit the form
$('form'+id).submit();
// if needed, remove deleted image
// and form from DOM
$('#img'+id).remove();
$('#form'+id).remove();
// hide modal
$('#myModal').modal('hide');
})
Demo
I am using Bootstrap4 and in my navbar i have a button to open a modal.I have added jquery,popper and bootstrap js in correct order as mentioned in bootstrap website .I have to click this button 5-6 times continuously to open the modal
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" />
my modal is
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
<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">
<asp:Label ID="lblLoginID" runat="server"></asp:Label><br />
<asp:Label ID="lblIPAddress" runat="server" ></asp:Label><br />
<asp:Label ID="lblSystemName" runat="server" ></asp:Label><br />
<asp:Label ID="lblVersionInfo" runat="server" ></asp:Label>
</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>
I tried using javascript to open the modal by using this code
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" OnClientClick="return openmodal();return false;" />
<script type="text/javascript">
function openmodal() {
$('#userDetails').modal('show');
}
</script>
However this does not work .My javascript function is being called as i put an alert message and tested .There is something weird happening with vertical scroll bar though on click of the button ,it shows up for sometime on click of button and vanishes i think once button click event ends .
The issue is with "fade" in the modal
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
i removed fade and used "show" and the modal is working
<div class="modal show" id="userDetails" tabindex="-1" role="dialog" >
also i added a javascript function for the button that triggers the model
<script>
$( '#btnUserDetails').click( function(){
$( '#userDetails').modal('show');
});
</script>
I need to pass the userName to the bootstrap modal window and show the passing name in modal window.
For example,
If i pass jawa the modal will show the content like 'This is jawa'
we need to add the attirbute data-id the in your button like as below,
<button type="button" data-toggle="modal" data-target="##myModal" data-id="jawa">Delete</button>
This JS function will be called before open boostrap modal window. And in that function we can able to get the data-id attribute value and then we can able to write a code based on getting value. See the below code,
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function(event) {
var userName = $(event.relatedTarget).data('id');
$("#modalText").html("You are going to be deleted" + userName);
});
</script>
This is the modal window code,
<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="cancelModal">Google Map</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="modalText"></div>
</div>
<div class="modal-footer">
Open in new tab
</div>
</div>
</div>
</div>
Thanks,
Please anyone can help me, How can animate css styles can be use to animate while bootstrap modal opens and closes?
As Modal Opens it should be open with fadeIn effect and while closing it should with fadeOut effect.
I wanted to use animate.css css stylesheet for animate modal poup open and close.
It should add class fadeIn while opening Model and while closing the modal it should be adding class fadeOut. ( Class .fadeIn & .fadeOut are from aniamte.css stylesheet)
$('.modal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn animated');
})
$('.modal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeOut animated');
})
This is I wanted.
Add fade to class attribute of your modal markup:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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 with animation</h4>
</div>
<div class="modal-body">
Close modal to see <i>fade-out</i> effect.
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal with <i>fade-in</i> effect
</button>
Remove the .fade class from your modal markup to simply appear one. See Remove animation section for details.
$('#modelDivId').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipInX animated');
})
$('#modelDivId').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipOutX animated');
})
HTML:
<!-- Button trigger modal -->
<a href="#" data-toggle="modal" data-target="#myModal" class="quickview">
OPEN MODAL
</a>
<!-- 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">BX Slider</h4>
</div>
<div class="modal-body">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
<a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
<a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
slider.destroySlider();
//$('#myModal').modal('show');
slider.reloadSlider();
}
$(".quickview").on("click", quickView);
I have a Bootstrap modal which I'm injecting dynamic image galleries into. So fx. I have 10 links on a page, each link is containing unique data-attributes with image URLs. I am then sending these URLs into my click event, so I can use them with BXslider, but it doesn't seem to be working.
I'm reloading the BXslider within my click event, but the "mainimage" is not showing.
However, if I move the code out of the click event, it seems like it's working.
Any suggestions here?
Codepen:
http://codepen.io/marting/pen/dYNabj?editors=101
I changed your code to this, and it works like a charm
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
setTimeout(function() {
slider.reloadSlider();}, 200);
}
$(".quickview").on("click", quickView);
See it works here: http://codepen.io/anon/pen/JYgxOE?editors=101