I have created bootstrap modal, and appending some html through AJAX...
I am not able to show perfect width as per content. I have tried:
width: 'auto'; //it looks as in Screenshot
width: 100%; //it takes whole page width
It looks like:
var PopupHelper = {
Show: function () {
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html(data);
$('#popup-Model').css({ 'width' : 'auto','overflow': 'auto' });
$("#popup-Model").modal();
}
qAjax.Init();
}
}
<!--Popup Window -->
<div class="modal fade" id="popup-Model" 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" style="margin-top:-10px !important">×</button>
</div>
<div class="modal-body" id="popup_content">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->
How to make modal width, as per the content inside modal-body?
NOTE: modal HTML shown in image can vary
Thanks!!!
Since you're already using javascript to render this modal, it will be easier to just set the modal-dialog width to the same width as your content. It's hard to do this only with CSS because modal-dialog have fixed width (varying per screen size).
$("#popup_content").html(data);
$("#popup-Model").modal();
setTimeout(() => {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 30; //Padding
$(".modal .modal-dialog").css({ 'width' : width+'px' });
}, 0); //Maybe you'll need a longer timeout because of css transitions
working example
Worked in OP case as:
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html('<div class="test-div">' + data + '</div>');
$("#popup-Model").modal();
setTimeout(function () {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 50; //padding
$(".modal-dialog").css({ 'width': width + 'px' });
$('#popup-Model').css({ 'overflow': 'auto' });
}, 500);
add row and col-* class in your popup to handle content
<!--Popup Window -->
<div class="modal fade" id="popup-Model" 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" style="margin-top:-10px !important">×</button>
</div>
<div class="modal-body">
<div class="col-xs-12" id="popup_content"></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->
try to use min-width and position:relative style to "model-body" class. I hope it will work.
Related
I have a modal caller link and a modal as below :
<!-- modal caller -->
CALL MODAL
<!-- modal -->
<div id="modal" class="modal auto-hide-modal" data-time="3000" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">MY TITLE</h5>
</div>
<div class="modal-body">MY TEXT</div>
<div class="modal-footer">
<div class="progress" style="height: .25rem;">
<div id="time_indicator" class="progress-bar" role="progressbar"></div>
</div>
</div>
</div>
</div>
</div>
And I have these scripts :
$(document).on('shown.bs.modal', '.auto-hide-modal', function () {
var time = $(this).data('time');
$(this).delay(time).fadeOut(300, function () {
$(this).modal('hide');
});
});
So far, so good.
I want progress bar (time_indicator) shows remaining time for the modal to close.
You have to use jQuery animate functoin and set the speed of animation to time. and then reset the width back to 0; so the next time you open the modal the animation performs again.
CSS:
#time_indicator {
width: 0;
}
JavaScript:
$(document).on('shown.bs.modal', '.auto-hide-modal', function () {
var time = $(this).data('time');
$("#time_indicator").animate({width: "100%"}, time);
$(this).delay(time).fadeOut(300, function () {
$(this).modal('hide');
$("#time_indicator").css("width", 0);
});
});
Inside a dropdown-menu I have a button to open a modal popup. If you display the modal popup when you close it, it will also close the dropdown-menu.
How to prevent from closing a dropdown-menu when a modal popup is displayed ?
This is the code :
<div class="dropdown-menu" style="width:240px;">
<div class="row">
<div class="col-xs-6">Log in</div>
<div class="col-xs-6"><img data-toggle="modal" data-target="#myModal" width="20px" src="images/help-question.png"></div>
</div>
...
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
etc...
</div>
ok, I have found a solution :)
var hideLogin = true ;
$('#ModalHelpLogin').on('shown.bs.modal', function (e) {
hideLogin = false ;
})
$('#ModalHelpLogin').on('hidden.bs.modal', function (e) {
hideLogin = true ;
})
$('#DropLogin').on('hide.bs.dropdown', function () {
return hideLogin ;
});
I have the following HTML:
LINKY
<!-- 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">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
<iframe src="http://domainy.com/" width="100%" height="380" frameborder="0"
allowtransparency="true"></iframe>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
When I change the modal iframe src with the following JS, the content of .modal-content is completely overwritten with HTML loaded from the HREF in question on the button that toggled the modal.
$('[data-target="#myModal"]').on('click', function (e) {
e.preventDefault();
var _linky = $(this).attr('href');
var _target = $(this).data('target');
if (_target.length > 0) {
_target.find('iframe').attr('src', 'about:blank');
var _isRemote = false;
if (_linky.indexOf('http') > -1) {
_isRemote = true;
}
if (!_isRemote) {
if (_linky.indexOf('?') > -1) {
_linky += '&tmpl=component';
} else {
_linky += '?tmpl=component';
}
}
_target.find('iframe').attr('src', _linky).load(function() {
_target.modal('show');
});
}
});
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
How can I prevent Bootstrap from replacing everything in .modal-content?
_target was simple a string value representing an elements ID - not a jQuery object.
Code fixed and updated: http://codepen.io/TheFoot/pen/QbpMYx
I am doing some modifications with twitter bootstrap modal and I am trying to achieve dynamic image loading in modal window. Also when the certain image is loaded I would like to be able to swipe between images. Can anyone help me with this one?
Here is structure:
<!-- Image trigger -->
<div class="item">
<a data-toggle="modal" href="#myModal" class="modal-trigger">
<img src="img/7.jpg" alt="">
</a>
</div>
<!-- Modal window -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- it makes empty spaces clickable -->
<div type="button" class="close" data-dismiss="modal" aria-hidden="true"> </div>
<img data-dismiss="modal" aria-hidden="true" src="http://placehold.it/800x670" class="image" alt="" data-target="#myModal"></div>
And here is javascript for swipe feature:
$(document).ready(function() {
// Swipe feature
$("#myCarousel").swiperight(function() {
$("#myCarousel").carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$("#myCarousel").carousel('next');
});
You have to write several methods / functions for each task.
var yourApp = window.yourApp || {};
yourApp.initModal = function (options) {
$('a.js-modal').on('click' function (event) {
$('#myModal').modal(options);
event.preventDefault();
});
};
yourApp.loadModalContent = function () {
var content = $("#modalContent").html();
if (content.length) {
$('#myModal').html(content);
}
};
yourApp.initCarouselSwipe = function (options) {
$("#myCarousel")
.carousel(options)
.swiperight(function() {
$(this).carousel('prev');
})
.swipeleft(function() {
$(this).carousel('next');
});
};
$(function() {
yourApp.initModal({
show: function () {
yourApp.loadModalContent();
yourApp.initCarouselSwipe();
}
});
});
One to open the modal with a callback that does load your dynamic content
The content loader should retrieve the modal's selector and put the content into
Last but not least we have to init the swipe events and the carousel
Ultimately I'm try to get the caption and author to display below the image.
Here is the html:
<div class="row">
<div class="col-lg-3 col-sm-4 col-6"><img src="//placehold.it/600x350" class="thumbnail img-responsive"></div>
<div class="col-lg-3 col-sm-4 col-6"><img src="//placehold.it/600x350/2255EE" class="thumbnail img-responsive"></div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Heading</h3>
</div>
<div class="modal-body">
<p class="modal-caption"></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And the javascript. I just don't know what I'm doing wrong, so any help would be awesome. I'm trying to access the data-attributes inside of the anchor tags to populate the corresponding divs (data-caption would display in .).
// Gallery Modal
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
var caption = $(this).parent('a').attr("data-caption");
$('.modal-caption').html(caption);
item.attr("data-caption",caption);
item.appendTo('.modal-caption');
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
In your code item is not defined.
Try this instead: Takes data-caption and data-author and creates matching elements.
Narrows down the jQuery selectors, constructs jQuery selections only once if applicable and uses $.fn.text for better performance.
Working Fiddle: http://jsfiddle.net/9NYNW/1/
$('.thumbnail').click(function(){
var $parent = $this.parent('a');
var $modal = $('#modal');
var $title = $modal.find('.modal-title');
var $body = $modal.find('.modal-body');
var $items = $();
$.each(['caption', 'author'], function(i, key) {
var $item = $('<div />', { 'class': 'modal-' + key });
$item.text($parent.attr('data-' + key));
$items = $items.add($item.get(0));
});
$title.text($parent.attr('title'));
$body.html($(this).clone());
$body.append($items);
$modal.modal({show:true});
});