I'm working on two different things with a Bootstrap Modal. The first is to dyanamically load them from an MVC partial view. That part seems to be working. Now I'm trying to get the Modal to center on the page.
I'm working off of this example but can't seem to get it to work. https://www.abeautifulsite.net/vertically-centering-bootstrap-modals
I changed the name of dialog id in the JavaScript to ".modal-container" so that it should find my modal. Other than that I don't see anything else I would need to change. I've looked at the F12 Dev Tools and I don't see any errors.
Index.cshtml
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div>
<div class="container">
#Html.ActionLink("Test Modal ", "TestModal", "Test", null, new { #class = "modal-link btn btn-warning" })
</div>
</div>
<div id="modal-container" class="modal fade" role="dialog">
<div class="modal-content">
</div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script type="text/javascript">
//**** Bootstrap Modal - used with Partial Views ***********************
$(function () {
// Attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
/**
* Vertically center Bootstrap 3 modals so they aren't always stuck at the top
*/
$(function () {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-container');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function () {
$('.modal:visible').each(reposition);
});
});
</script>
</body>
</html>
Controller
public class TestController : Controller
{
// GET: Test
public ActionResult Index()
{
return View();
}
public ActionResult TestModal()
{
return PartialView("_TestModal");
}
}
_TestModal.cshtml
<div class="modal-body">
<h4>
Are you sure you want to delete this cost center from all clocks in the group?
</h4>
#using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post))
{
<div class="row">
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" id="approve-btn" class="btn btn-danger">Save</button>
</div>
</div>
}
</div>
<script type="text/javascript">
$(function () {
$('#approve-btn').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
EDIT: I should have mentioned in the initial post that the Modal just displays at the top of the page and goes to 100% width.
Well, I noticed (what I believe to be) a fairly simple mistake in your code just by looking at it:
dialog = modal.find('.modal-container');
finds any element with a CLASS of 'modal-container'.
In your code snippet, however, you have the ID of the div set to 'modal-container', not the CLASS.
So that line of code above is not locating the div you want. In fact, I don't think it is finding any elements (since there are none with a class of 'modal-container').
So maybe change it to something like:
<div class="modal fade modal-container" role="dialog">
<div class="modal-content">
</div>
</div>
OR leave the HTML the same and change the modal.find() to say something like:
dialog = modal.find('#modal-container');
Let me know if that helps.
Edit:
Your modal is full width because your Bootstrap modal structure is off. You are missing a div.
This is what you have:
<div id="modal-container" class="modal fade" role="dialog">
<div class="modal-content">
</div>
</div>
here is what you need (and should fix your problems):
<div id="modal-container" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
adding a div with the class of 'modal-dialog' should help.
Oh, and change the modal.find() to:
dialog = modal.find('.modal-dialog');
Related
I have a few hidden modals on a page that I want to control with a single block of javascript code.
I'm trying to test to see if I'm getting the correct close button with class close, but my console.log is currently printing -1.
HTML
<span class="open">Button A</span>
<span class="open">Button B</span>
<!--modal-->
<div class="modal">
<!--modal content-->
<div class="modal-content">
<!--close button-->
<span class="close">×</span>
<!--content A-->
</div>
</div>
<!--modal-->
<div class="modal">
<!--modal content-->
<div class="modal-content">
<!--close button-->
<span class="close">×</span>
<!--content B-->
</div>
</div>
JS
$(document).ready( function() {
//when a class '.open' is clicked
$('.open').click(function(){
//store the index of the clicked span in a variable
var indexer = $('.open').index(this);
//test output - working
console.log("open. " + indexer);
//store all classes '.close' in a variable
var close = $('.close');
//store '.close' with same index as clicked button
var closeindex = $('.close').index(indexer);
console.log(closeindex);
});
});
I'm trying to walk through this click function and assign each class with the correct index to a variable, and I'm using console.log to print the indexes to the console.
With console.log(closeindex), I'm trying to get the index of the close button that has a matching index of span .open that was clicked, but currently it's returning -1.
I want to eventually do something like:
close.click = function() {
$('.modal').index(indexer).style.display = "none";
}
var closeindex = $('.close').eq(indexer);
Ok, so if you have a relationship between open and close such that the 3rd open related to the 3rd close, then you can get the related close by using the eq() method as above.
eq() will get you the element at that index, keeping it as a jQuery object.
If you're trying to open and close modal dialogs based on the buttons, I'd like to suggest an alternative method to indexes. With indexes, any refactoring/reordering of your elements is liable to throwing your code off entirely.
Consider using data attributes to keep track of what modal each open button is referring to. That way, no matter where your button/modals are, they are permanently linked.
If you give each modal an ID, and then add that ID to a data attribute on your open button...
<span class="open" data-modal="modal1">Open Modal 1</span>
<div class="modal" id="modal1"></div>
...then you can easily relate open buttons to their proper modals.
The close buttons can simply say "Close my parent modal" when clicked. We can do this using .closest( selector ) which traverses upwards in the DOM to find the first matching ancestor.
Working Example:
$(".open").on("click", function() {
$(".modal").hide(); //Hide all open modals
var modalId = $(this).data("modal"); //Get the Modal ID from the data-modal attribute
var $modal = $("#" + modalId); //Select the modal with that ID
$modal.show(); //Show it
});
$(".close").on("click", function() {
$(this).closest(".modal").hide(); //Close the closest modal (ancestry-wise)
});
div.modal {
display: none;
padding: 50px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="open" data-modal="modal1">Button A</span>
<span class="open" data-modal="modal2">Button B</span>
<!--modal-->
<div class="modal" id="modal1">
<!--modal content-->
<div class="modal-content">
I'm modal 1!
<!--close button-->
<span class="close">×</span>
<!--content A-->
</div>
</div>
<!--modal-->
<div class="modal" id="modal2">
<!--modal content-->
<div class="modal-content">
I'm modal 2!
<!--close button-->
<span class="close">×</span>
<!--content B-->
</div>
</div>
<!-- -->
I have a modal DIV:
<div class="modal fade" id="window_modal">
.....
</div>
But when click out of the WINDOW, modal window close, and I want this windows close only using close button inside modal window.
Give the modal the data-attribute backdrop="static"
e.g.
<div class="modal fade" id="window_modal" data-backdrop="static">
.....
</div>
All to find here:
http://getbootstrap.com/javascript/#modals-usage
<script type="text/javascript">
$( document ).ready(function() {
$('#window_modal').on('hide', function (e) {
e.preventDefault();
});
});</script>
I have a bootstrap modal setup with the following code:
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Testimonials</h3>
</div>
<div class="modal-body">
<p>Test Text Here</p>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<button class="btns btn-3 btn-3g btnsx" data-toggle="modal" href="#myModal">More</button>
However, I am getting only a black background when clicking the button.
I am also seeing some of my js appearing at the bottom of my page (only when the modal code is inserted):
.on('submit', function() { var form = $(this); var post_data = form.serialize(); //Serialized the form data for process.php $('#loader').html('loadng Please Wait...'); $.ajax({ type: 'POST', url: 'http://shazconstruction.com/test/process.php', // Your form script data: post_data, success: function(msg) { $('#loader').html(''); // We know this is the form that needs fading in/out $('form#contactUs').fadeOut(500, function(){ $('form#contactUs').html(msg).fadeIn(); }); } }); return false; }); });
Here is the site where everything exists:
http://bit.ly/1dbf4Rz
For reference, this is the section with the modal setup:
http://i.imgur.com/1SlNR1s.png
Check out the source of your page. However it's being generated has a pretty clear error: http://screencast.com/t/GZv0KwPktoO
Look at line 762. There is no opening script tag, so that would explain why you're seeing your JS appearing at the bottom of the page.
As for the rest of it, BaBL86 is right, you will want to fix the issue with your mousewheel script as it's throwing errors that cause the page to stop rendering JS.
Once those two issues are fixed, let us know if there are still problems.
Edit: You also have incorrect HTML for your modal window (based off the bootstrap 3 documentation). Try using this instead, and moving your modal window to right after the body tag:
<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">
<a class="close" data-dismiss="modal">×</a>
<h3>Test Header</h3>
</div>
<div class="modal-body">
<p>Test Text Here</p>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
You have an error in your mousewheel function. Check this answer, it's about this problem:
function handler(event) {
< ---- >
return $.event.handle.apply(this, args); // error here
}
Edit your function to:
return $.event.dispatch.apply(this, args);
You have given !important to .hide. Remove the imporant
From this
display: none!important;
To
display: none;
I can also see that you are not giving any background-color. Use the same code from bootstrap
I'm using this simple jquery plugin for modal popups but it doesn't have a function for multiple popups so I'm trying to make my own.
First I added unique indexes to the buttons that open the modal and the modal divs. The HTML is created dynamically.
<button class="my_modal_open" id="1">Open modal</button>
<div id="my_modal" class="1" style="display:none;margin:1em;">
×
Modal Content
</div>
<button class="my_modal_open" id="2">Open modal</button>
<div id="my_modal" class="2" style="display:none;margin:1em;">
×
Modal Content
</div>
<button class="my_modal_open" id="3">Open modal</button>
<div id="my_modal" class="3" style="display:none;margin:1em;">
×
Modal Content
</div>
And then I modified the js to open modals by appropriate index.
$(document).ready(function() {
$('.my_modal_open').click( function() {
$('#my_modal').css('display','none'); //added
var open_id = $(this).attr('id'); //added
$('#my_modal.' + open_id).popup(); //changed to get div id and class
});
});
This works but the modals open only once. As a fix I tried adding
$('#my_modal').css('display','block');
after the popup() function which works but the modal doesn't display in the right position, the second time.
Please share any suggestions. Hopefully someone used this plugin before.
You might want to look at other libraries like jQuery UI or Twitter Bootstrap, since they have already solved this problem. If you want to roll your own, I would change your approach slightly.
Add an attribute to the buttons which stores the ID of the modal dialog you want to show. In the example below I called it "data-modal-id". When you click the button, get the value of that attribute and look up the modal with that ID and show it:
HTML
<button class="my_modal_open" data-modal-id="1">Open modal</button>
<div id="1" style="display:none;margin:1em;">
×
Modal Content
</div>
<button class="my_modal_open" data-modal-id="2">Open modal</button>
<div id="2"style="display:none;margin:1em;">
×
Modal Content
</div>
<button class="my_modal_open" data-modal-id="3">Open modal</button>
<div id="3" style="display:none;margin:1em;">
×
Modal Content
</div>
jQuery
$(document).ready(function () {
$('.my_modal_open').click(function () {
$('#' + $(this).data("modal-id")).popup()
});
});
Working Demo
You can use fadeIn() and fadeOut().
Example
Create something like
<div class="my_modal_background"></div>
where in css
.my_modal_background{ background:#000; position:fixed; width:100%; height:100%; z-indez:0 }
.my_modal_open div{ z-index:1; }
And your Jquery must be like this
$(document).ready(function () {
$('.my_modal_open').click(function () {
$(this).children('div').fadeIn();
$('.my_modal_background').fadeIn();
});
});
So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?
It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});
</script>
http://jsfiddle.net/7kg7z/5/