I've got the following HTML in an MVC 5 / Bootstrap app. As you can see, I am attempting to display a photo in the modal dialog. This works fine. But, if the photo is wider than the dialog, it extends beyond the bounds of the dialog. Is there a way I can have the dialog expand, to a certain point, then display scroll bars, based on the size of the contents (image)?
<div class="modal fade" id="viewPhotoDialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Ask the Experts</h4>
</div>
<div class="modal-body">
<img src="#Url.Action("GetPhoto", new { askTheExpertId = #Model.AskTheExpertId })" alt="" title=""/>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can add .img-responsive class to the img (gives max-width:100% and auto height).
About modal width, there are 2 extra option classes modal-lg and modal-sm that you can add at .modal-dialog
http://getbootstrap.com/javascript/#modals
Related
I am using Bootstrap Modal in ASP.Net MVC Project, it work fine but the problem that the Overlay of Modal cover only the page but not layout page and Navbar,
I have layout page and i am using modal in sub page
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</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>
I'm having issues with the bootstrap modal not performing as it should on Safari and iOS. I've read similar issues in Stack Overflow, but couldn't find one with a problem using Modals in an image. Can somebody provide some insight and help please?
<img alt="therapist" class="img-circle" data-target="#linda" data-toggle="modal" src="img/team/linda.png"> // modal opens when image is clicked
<h3 class="team--name" data-target="#linda" data-toggle="modal">Linda</h3>
<!-- Modal -->
<div aria-labelledby="myModalLabel" class="modal fade" id="linda" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
<h2 class="modal-title team--name" id="myModalLabel">Linda</h2>
<h4 class="team--name">CAMTC</h4>
</div>
<div class="modal-body">
<p>Linda brings compassion, positive energy and balance into her clients' lives</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
I have tried implementing the class below inside the image with no avail.
.clickable {
cursor: pointer;
}
Case fixed.
I've added the following script to append modal to body.
$(document).ready(function () {
$(".modal").appendTo("body");
});
I am displaying an edit form in a bootstrap modal. Using asp mvc5, I am returning a partial view into a bootstrap modal window. The form shows up, fills with data and posts just fine. Only issue is the header and footer do not display. The code shows up in "view page source" but not in the elements tab of the web dev inspector (chrome).
I plan to have multiple different modals on this one page, so I am using a placeholder in the _layout page for the modal, then passing in different partial views.
placeholder in layout:
<body>
#*Container for modal windows*#
<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<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>×</span></button>
<h4 class="modal-title" id="modalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">This is the footer</div>
</div>
</div>
</div>
partial view (only contains a form and the modal cancel button):
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
<button class="btn btn-warning" data-dismiss="modal">Cancel</button>
</div>
</div>
Some js to add "data-" tags to the links:
$(function () {
$('body').on('click', '.modal-link', function(e) {
//e.preventDefault();
$(this).attr('data-target', "#modal-container");
$(this).attr('data-toggle', 'modal');
});
//Clear modal cache
$('#modal-container').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});
});
mvc controller just returns the partial:
return PartialView("_EditOrchard", orchard);
You need to include the relevant markup needed for header and footer as well when returning the partial view content. Your partial view's might have different buttons based on the request you are making. Some may have only a "Save" button, some may have only a "Delete" button and the code to execute when you click on those buttons are also different.
<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">
<p>Some contet for the modal </p>
</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>
The reason why it is not working as you thought is, modal-container is the outer div inside which you have header and footer. The response coming from server will overwrite the existing content of that.
Currently I'm using a Model that after posting back from a Form I look at a model property to display an Alert. However I now need to have a Modal displayed instead. I know I need a Modal div at the bottom of my page to display but I can't figure out how to call that from the Razor Model.
Researching ideas all I've found is where a button click or some click event would call some JS and show the modal. I can't find anything on how to just open it from the View.
The concept is that the end user will click a button do basically do like a Time Stamp into the database. In the controller I set a MessageType property and then based on that I would show say a Bootstrap Error Alert if there was an error or Success Alert if everything was okay. Now instead of calling the Success Alert I need to open a Modal.
Here is how I'm doing it now with an Alert. This is in my MVC View. Is there a way to do the same but instead of Alert open a Modal?
#if (Model.MessageType == "PUNCH")
{
<div class="alert alert-success">
<h3>Punch accepted at <strong>#Model.CurrentTime.</strong></h3>
</div>
}
Similar to what you did, you may execute the javascript code which shows the modal dialog.
Assuming you have the required bootstrap files loaded to your page,
<!-- 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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#section Scripts
{
#if (Model.MessageType == "PUNCH")
{
<script>
$('#myModal').modal();
</script>
}
}
I am having a modal that have two divs in it. Now i am willing to open the same modal with two different links.
Here is my modal:
<!-- Modal -->
<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">
<%= link_to "Back","#",class: "btn btn-default",id: "Back-Link",style: "display:none"%>
<%= link_to "Next","#",class: "btn btn-default",id: "Next-Link"%>
<div id="One">
<p>Some text in the modal.</p>
</div>
<div id="Two" style="display:none">
<p>Modal Two.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Following are the links:
<%= link_to "Test","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
<%= link_to "Test1","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
When I click on "Test" Link the modal should open with div id "One". And when i click on "Test1" the modal should open with div id "Two".
can anyone help me? Thank you in advance
Here is a working fiddle.
I made use of the data attributes to store id of div to show inside the modal. Then on click of it, I changed its style from display:none to block.
<div class="modal-body">
<div id="one" class="hide_first">
<p>Some text in the modal.</p>
</div>
<div id="two" class="hide_first">
<p>Modal Two.</p>
</div>
</div>
Open #One
Open #Two
<!-- Storing the id of divs in data-modal-show -->
And write some javascript like this
//classes given to our links
$(".modal-open-links").on("click", function(e){
//First set display:none for all divs
$(".hide_first").css("display", "none");
//hide_first class is on both our divs inside modal body that we want to alternatively show
content_to_show = $(this).attr("data-modal-show");
//the div id we want to show on modal open
//Show the one we clicked
$("#" + content_to_show).css("display", "block");
});