We Keep Coding

Why does the modal not appear in the center?

I'm using a semantic's modal with angular and i'm getting position problem. the thing is, when i pop up the modal, it doesn't show at the right position.
this is my html file
<div class="ui modal">
<div class="header">Header</div>
sdasdasdasds
</div>
this is in controller.js file
$scope.agregar = function(){
//$('.ui.modal').modal();
$('.ui.modal').modal({blurring: true}).modal('show').modal("refresh");
}

Sorry for the late reply, but your post came as a search result when i was looking for the solution for the same problem.
Some portals say that timeout of 100ms works, but it didn't help me.
I found a workaround for the issue. Not a very good approach but doing refresh twice solved the problem for me.
I was working on angular plus semantic combination and you can see the following snippet :
$scope.reviewAppointment = function(appointment) {
var modal = $('.ui.modal');
modal.modal('show');
modal.modal('refresh');
modal.modal('refresh');
//rest of the code
}
Following is when refresh was not done
When the refresh was done once
Better than previous case, but you can still see some extra space above the modal and no space was left at the bottom.
When refresh was done twice
The modal is placed perfectly at the centre. It wouldn't change if you now apply refresh more number of times.
Hope it helps. But again not a very good approach.

Foundation 6 Off-canvas menu auto-close after click

I've been searching how to auto-close off-canvas menu after some menu item is clicked but nothing seems to work.
So I followed guide on how to make off-canvas menu on Foundation 6 docs and it works. This part is okay. Now when I click on some link menu just stays there and I want it to close. Does anyone know how to fix that.
I've found snippet that should do the trick but my menu stops showing after I appy this JS. Others report the same problem.
$(document).foundation({
offcanvas : {
open_method: 'move', // Sets method in which offcanvas opens, can also be 'overlap'
close_on_click : true
}
});
Here are the docs, but since I don't know much about JavaScript I beg someone to write correct code.

You could use the close method on the .off-canvas menu when a link is clicked:
$('.off-canvas a').on('click', function() {
$('.off-canvas').foundation('close');
});
Click Here for a demo.

In advance, sorry for my poor english,
Just go through online to figure it out, and finally, the script above that Yass provided is working. But when i inserted Slick slider script in, it no longer worked.
i just found out a solution that worked for me, but maybe there have bug, dunno.
Inside foundation offcanvas documentation, a close button to close the canvas is given, like below showed.
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
So I adapted it and put the "data-close" to the link, when i clicked, it scroll to the specific div and close up canvas
And here is the link for more understanding? because i think my explanation sucks
https://jsfiddle.net/mbsj7d7p/

Opening a boostrap modal after closing another - unexpected behavior

I want to show a bootstrap modal immediately after user close another. So I use the following code trying to do this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
});
Everything happens normally. First modal closes and next modal appears.
However, the class="modal-open" should be in body element to scroll works properly, what is not happening. After second modal is shown, that class disappears from body.
Am I doing something wrong?

Am I doing something wrong?
I don't think so. The large number of issues on this topic suggests that this was either not well-designed, or not designed to support this. Relevant bugs would be
Multiple modals fix #5022, Multiple modals #11872 and
.modal-open is not applied to body when "switching" to another modal #11865 where it is explicitly said by #mdo:
Yup, we won't be supporting multiple modals.
So what to do about it?
A small timeout should definitely help:
currentModal.modal('hide').on('hidden.bs.modal', function (){
setTimeout(function() {
nextModal.modal('show');
}, 100);
});

Without seeing this in action, my guess is that there is some kind of callback handler that removes the class "modal-open". You can try manually adding it like this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
body.addClass('modal-open');
});
But instead of overriding Bootstrap, have you looked into data-dismiss and data-target?

Jquery Modal window - Modal property breaks code

I hope someone can help. I am missing some logic and styles while I am running the form in JQuery modal window with the 'modal' property is set to 'true'. I am trying to utilize the form from http://jqueryui.com/dialog/#modal-form.
The same code used outside modal window is running correctly. I am not sure how to fix it and decided to share it with you.
I created a page in JSFiddle - http://jsfiddle.net/vladc77/GcQRg/16 to show the code. However, the modal window cannot be ran from there. As a result, I uploaded the same test in here - http://www.vladcdesign.com/modalWindow
When I set (modal: true) then I am getting the following problems.
1.The check boxes in work hours form should enable/disable menus to set the time
2.“More” check box should show/hide a text field
3.I lost ability to set margins between elements in Hours settings form. Now all menus are touching each other even though I use margins styles. They just don’t apply.
All of these issues are present only while I run this DIV in a modal window. It works OK outside the modal window. I am wondering if someone can help and explain what is wrong with the code. Any advice is highly appreciated.

Looking at both the fiddle and the example you posted on your site, you're getting the following error:
Uncaught ReferenceError: closedHours is not defined
The problem appears to be coming from this line:
$(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');
Also, the reason you can't get the dialog to load on your fiddle is that you're including the JS files in the wrong order. It should be jquery, jquery ui, and then jquery ui.selectmenu.
Your change function on the checkboxes also has a bug, it should be something like this:
$('input[type=checkbox]').change(function() {
if (!this.checked) {
$(this).parent().siblings('select').removeAttr("disabled");
}
else {
$(this).parent().siblings('select').attr('disabled', 'disabled');
}
});
Even when I changed all that, the checkboxes still weren't working, so I removed your custom jquery and jquery ui references. When I did that, they worked fine so something that you've done to customize those is what's causing your problem. You can view my changes here.

The first $(document).ready(function(){}); and second $(function() { }); are the same, the code will be executed in order they are in these blocks.
However the $(window).load(function(){ }); is a little bit differenet, it gets executed later. Check this post to see the difference.
You could experminet a little with defining the click event to your "Open modal window" button, and do all of the binding when that fires:
$('#create-user').bind('click',function(e){
// To avoid navigating by link
e.preventDefault();
e.stopPropagation();
// Do every binding / appending
// $('.workDayHours').each(function() { ...
});

Twitter Bootstrap Modal scrolling the page up on show

Clicking on a link which triggers a Twitter Bootstrap Modal to pop up is causing the browser to scroll up the page. This behavior is only occurring in Chrome.
Here is a demonstration page:
http://www.turizmburosu.com/test2.aspx
The page has 600 rows of links, causing the page body to exceed window height. If any of these links is clicked, it displays the modal dialog. When in Chrome, clicking any of the links below the initial view will cause the background page to scroll up (not always entirely to the top).
I am use the following function to trigger the display of the Modal:
function test(id, imp) {
$("#modalLabel").html("Header");
$("#modalBody").html("Body");
$("#myModal").modal("show");
}
and the links are of the form:
Test Link ###
I am seeing this behavior in Chrome 22.0.1229.94 m.
Any suggestions/ideas as to why this is happening and how to prevent it?
Additional Example
This can be recreated on the Twitter Bootstrap documentation page for the Modal plugin.
Once on the page, simply override the existing data-api to use the JavaScript api instead:
$('#modals a[data-toggle="modal"]').on('click',
function(e) {
$('#myModal').modal('toggle');
return false
});
Now, if the Launch Demo Modal button is clicked, the page will scroll up when the modal is shown.
Again, this is using Chrome.

Fixed (10/29/2012)
This issue has been fixed since Bootstrap v2.2.0. See commit e24b46... for details.
(original answer)
This is due to a bug in the implementation of the Twitter Bootstrap Modal (as of 2.1.1). The root of the problem is that the focus is set to the modal prior to it completing its transition. This will only occur under the condition that
the browser supports CSS transitions (and you are using bootstrap-transition.js);
the modal has the class fade; and
when focus is set to an element outside the current view, the browser will scroll to move it into view (e.g., Chrome, Safari).
It should be noted that this affects both the Data API (markup-based) and the Programmatic API (JS-based). However, the reason it is more noticeable when taking the programmatic approach is because, unlike the Data API, it does not automatically restore focus to the triggering element, and, hence, does not scroll the view back down when the modal is hidden.
More info is available on the Twitter Bootstrap repo under Issue #5336: Modal Scrolls Background Content.
A fix has been merged into the 2.1.2-wip branch, which should be up for release any day now.
Here is a demo using the patch bootstrap-modal.js:
JSFiddle

Same problem. It is caused by "#" in and the anchor is doing to scroll.
I fixed that by deleting the anchor tag and place this:
<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>

I had a similar issue on my site, which was caused by another jquery plugin (sidr).
When the sidebar was present and I opened a modal window, I would be sent back to top.
In jquery.sidr.js I changed line 102-106 from:
// Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}
To:
// Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}
If you are using this plugin along with twitter bootstrap's modal, maybe this can help you.

I had the same problem because of these lines of CSS which were thought to permantly display scrollbars in the browser. Removing the two lines solved the problem:
html,
body {
min-height: 100%;
height: 101%;
}

to bring the focus back on close
var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
var animationTime=1;
$('html, body').animate({
scrollTop: (triggerOffset)
}, animationTime);
});

I had been having this issue for so long but my solution was to remove href from the anchor tag
i.e.
<a onclick="test();return false;">Test Link ###</a>
I get no jump now
Hope this helps someone in the future