I use the below way to load modal content to main html:
main html:
<div class="modal modal-custom fade" id="custom-view">
</div>
.....
modal html(on a Individual html):
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-body" align="center">
<span class="section">Custom Info</span>
{% crispy form form.helper%}
</div>
</div>
</div>
I load the modal content to main html like this:
$(".mod-custom").click(function(ev) {
......
$("#custom-view").load(url, function() {
$("#custom-view").modal('show');
}
}
the url is to render data on modal html
In my situation,How to change the width?
I hope this link might help. Changing modal size.
https://coolestguidesontheplanet.com/bootstrap/modal.php#myModal2
If you want to change the modal-content width, you can add modal-content width when #custom-view on click
$(".mod-custom").click(function(ev) {
......
$("#custom-view").load(url, function() {
$("#custom-view").modal('show');
$('.modal-content').css({'width':'900px'});
}}
just change the class .modal-content if you want to change another class
Related
I'm displaying a MVC Partial View inside a Bootstrap Modal by clicking a button. My setup is like this:
Modal
<!-- 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">Title</h4>
</div>
<div class="modal-body" id="Preview">
#*PartialView*#
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
$.ajax({
type: "Get",
url: '#Url.Action("PartialViewTitle", "Controller")',
data: {},
success: function (data) {
$('#Preview').html(data);
$('#myModal').modal('show');
}
});
}
</script>
In my Controller I have defined a method PartialViewTitle() which returns the Partial View. I have a button, where onclick= links to the Open() function.
The problem is that the content of my partial View is displayed on the left side of the modal and on the right is blank space. I would like to have the size of my modal adapted to its content and the content to be centered. What is the best way to do this?
Thank you in advance!
To get the content centered you just have to add align-self-center as follow:
<div class="modal-body align-self-center" id="Preview">
To adapt size, you can use css display: inline-block; please take a look to the following article:
Bootstrap Modal Dynamic Width
In your .cshtml view use
<div id='myModal' class='modal hide fade in' data-url='#Url.Action("PartialViewTitle","Controller")'>
<div id='ModalContainer'>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
var url = $('#myModal').data('url');
$.get(url, function(data) {
$('#ModalContainer').html(data);
$('#myModal').modal('show');
});
}
</script>
If it doesn't work then need to add styles.
Try using $('#Preview').append(data); instead of $('#Preview').html(data);
I am trying to delete the parent div of a modal by clicking the delete button. I have a page with div with class="p" and I want to remove them when I submit a form via my modal.
Below is the code
<div class="p">
The first div with class p
<div class="modal fade" id="modal-delete">
<div class="modal-dialog">
<div class="modal-content">
<button class="delete"> Remove <button>
</div>
</div>
</div>
<div>
<div class="p">
The second div with class p
<div class="modal fade" id="modal-delete">
<div class="modal-dialog">
<div class="modal-content">
<button class="delete"> Remove <button>
</div>
</div>
</div>
<div>
I am trying to remove the div with class="p" when I click on the button but I cannot manage to do so, right now I am using:
$('.delete').on("submit", function (e) {
var modal = $(this).closest('#modal-delete');
$(modal).find('.p').parent().remove();
});
You can use contents() and replaceWith() method to remove the parent element except for its child element.
$('.delete').on("submit", function (e) {
var content = $("div.p").contents();
$("div.p").replaceWith(content);
});
Or another way is use unwrap() method :
$('.delete').on("submit", function (e) {
$("div.p").contents().unwrap();
});
I'm trying to load content into a modal using intercooler, example here:
http://jsfiddle.net/qvpy3coL/3/
I'm having no joy and wonder if this is possible, or whether the bootstrap js will conflict?
Html is:
<div id="confirm-me" class="btn btn-primary" data-toggle="modal"
data-target="#msgmodal" ic-get-from="/click" ic-target="dynamiccontent"
ic-trigger="click">
Click Me to show dynamic modal</div>
<div class="modal fade" id="msgmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Below will be dynamic content</h4>
</div>
<div id="dynamiccontent">
</div>
</div>
</div>
</div>
js is:
// mockjax stuff ...
$.mockjax({
url: "/click",
responseTime: 500,
response: function (settings) {
this.responseText = "Dynamic stuff here!";
}
});
I've never used intercooler but after a quick read it turns out there should be no problem.
The only requirement with dynamic content you want in the modal is that it should be valid HTML code.
I played with the example you put in some content:
$('#dynamiccontent').html('No, it wont have any problems as long as your placing HTML')
https://jsfiddle.net/5pe6yz0w/3/
I'm working on this bootstrap modal right now, but ran into a problem..
for the modal, I pass the modal data using jquery like this
<script>
$(function()
{
$('#exampleModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget);
offer = button.data('offer');
modal.find('.modal-body .placeoffer h5').text(offer);
});
});
</script>
It gets compensated in the div like this
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<style>.close {position:absolute;top:10;left:10;}</style>
<div class="modal-body">
<div class="placeoffer"><h5 align="right"></h5</div>
</div>
</div>
</div>
</div>
</div>
Now my question is, I send the offer text with html tags, but instead of rendering the html tags, they show up as raw data, how can I make them get parsed?
Try html(offer) instead of text(offer)
\o/
I found two similar answers here but both were unsuccessful for my situation (given my limited ability to translate them to my situation). I have a page with a lot of fairly large images and the default method of Bootstrap is to load all the modal images upon page load. The visible html renders fairly quickly (I have a spinner for that) but the additional load time for the hidden modals makes the page impractical. I want the page to load only the visible (non-modal) content to complete the page load (and clear the spinner) and then load each modal's content only when that modal is fired. I've tried every lazyload solution I could find but the images will not render in the modal (the 'data-src' placeholders render but not the 'src' images that are supposed to replace them). I only want to lazyload (or load on 'show.bs.modal') the large images of the modal, those within the 'modal-body' class. I hope this is clear enough.
Sample code:
/* Javascript placed in the head */
<script>
function lazyLoad(){
var $images = $('.lazy_load');
$images.each(function(){
var $img = $(this),
src = $img.attr('data-src');
$img
.on('load',imgLoaded($img[0]))
.attr('src',src);
});
};
$('.modal-body').on("show.bs.modal", function () {
lazyLoad();
};
</script>
/* HTML in the modal section */
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="galleryheader">
<img src="headerimage_1.png" height="77" width="1024">
</div>
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div>
<div class="modal-body lazy_load">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
</div>
<div class="modal-body lazy_load">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
</div>
<div class="modal-body lazy_load">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
</div>
</div>
</div>
</div>
<div class="close-lower" data-dismiss="modal">
<IMG SRC="images/close.jpg" WIDTH="85" HEIGHT="32"></a>
</div>
</div>
</div>
</div>
Firstly, put the lazy_load class on the img element, not on the parent div. Secondly the jQuery you need is something like this:
$('.portfolio-modal').on("show.bs.modal", function () {
$('.lazy_load').each(function(){
var img = $(this);
img.attr('src', img.data('src'));
});
});
Notes:
Use the portfolio-modal class to identify the modal.
Use the jQuery data() method to get the image to lazily load.