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.
Related
I don't know if it's possible in any way to achieve, what I want to do.
I got single page website with some sections. Something like this:
<div class="page pageOne"></div>
<div class="page pageTwo"></div>
<div class="page pageThree"></div>
<div class="page pageFour"></div>
When you open up the site, pages 2, 3 and 4 got display:none and the first one display:block. When I click a link in my navigation, the current "page" fades out and whatever link you've clicked on, the belonging section fades in. The links look like this:
<a class="pageChange" href=".pageFour">Four</a>
And here's the jQuery code:
$(".pageChange").click(function(e){
e.preventDefault();
var href = $(this).attr("href");
$(".page").fadeOut(200);
setTimeout(function(){
$(href).fadeIn();
}, 200);
});
What's pretty obvious is when I click the browsers back button, it won't fade the previous section in. It will just return to the previous site I've opened.So my question is: Is there a way to add a history entry in the browser, when clicking on a link? So I can press the back button and it fades the previous section in?
To get the visible section before clicking a link, I've done this:
var currentPage = $(".page:visible").attr('class').split(' ')[1];
But unfortunately that's no use to what I want to achieve.
I'd be incredibly happy if someone could provide me some help of how I could approach this (or if it's even possible)
You have to use the browser History API to update the URL. Then you can detect the back and forth movement with onpopstate and call your fadeIn and fadeOut methods accordingly.
I had the super similar situation! The best solution my friend would be to use https://alvarotrigo.com/fullPage/ You can read the code how he's doing on github. Basically you have to record the scrolling and later handle using a function for back and forth browsing.
I have a bootstrap modal in my web app that keeps being displayed even when I launch myModal.modal('close');. I am pretty stuck with that strange problem.
Approx. one in ten times, I have that display: block; staying after close. The modal is correctly hidden because I can't see it anymore but it is overlaying my entire page and I cannot click on anything.
I tried to handle the close with :
$('#myModal').on('hidden.bs.modal', function () {
$(this).css('display', 'none !important');
})
And this does not work, the modal div is still having style="display: block;"
Try these and let me know if they work.
$('selector').css('z-index', '-999');
$('selector').css('margin-left', '-50000');
$('selector').css('margin-top', '-50000');
My first question is: do you have a custom style sheet where you might be overriding the style for #myModal? If so, work to resolve that.
My second question is: what version of Bootstrap are you using? I have seen a bug logged similar to this back in 2012. If possible, upgrade to the latest version of Bootstrap (3.3.4).
My third question is: what are you clicking to do the close? Is it the close button ( type="button" class="close" ) or is it a button with a data-dismiss="modal" attribute?
If the close button, you could try this as long as you don't have other modals on the page:
$(".close").on( "click", function() {
$("#myModal").hide();
});
This might be worth a shot, too (though, not the recommended approach):
$("#myModal").on("hide",function(){
$("#myModal").css("display", "none");
});
Ultimately, I agree with needing a demo as Amit and Yerko suggest as this seems odd. I have never run across something like this, and I have used bootstrap for a long while.
This questions was already answered here - How to specify javascript to run when ModalPopupExtender is shown - but the accepted solution is not working for me.
The modalpopupextender is declared as below:
<ajaxtoolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btn"
PopupControlID="pnlModal" PopupDragHandleControlID="pnlModalDragHandle" BackgroundCssClass="modalBackground"
CancelControlID="btnModal" DropShadow="true"/>
The showing / hiding works fine. What does not work is linking a client script to the showing event of the modal popup extender. Based on the original question, I tried:
<script type="text/javascript">
function pageLoad() {
var popup = $find('mpe');
popup.add_shown(SetShowing);
}
function SetShowing() {
alert('showing');
}
</script>
Nothing happened. No alert, no errors. Reading further in the original post, I even added this line in the script:
Sys.Application.add_load(pageLoad);
The additional line had no effect. Any ideas why the original answer is not working? Thanks, I have been trying for hours.
I am not familiar with "modalpopupextender",
but why not just use some jquery?
$(document).ready(function(){
if ($('#mpe').is(':visible')){
//code for when MPE is visible here
}
});
jquery documentation
http://jsfiddle.net/N62g5/8/
I ended up having to attack this problem another way. None of the suggestions were able to successfully detect when the modalpopupextender was displayed. I instead changed my approach to handle user actions on the shown elements - like focusing on a textbox, etc. I could be confident the modalpopupextender was displayed if the user was interacting with it.
If you came here, I would direct you to the original post here - How to specify javascript to run when ModalPopupExtender is shown - and hope you were more successful than I was.
Thank you to everyone who commented, I sincerely appreciate your time.
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() { ...
});
So finally, I was able to create a simple accordion nav but it's making me nuts that when a user goes from second nav to third one( Future Generations to Israel Overseas) it doesn't work properly. The animation happens twice, sometimes even three times based on how fast you mouse is moved. Moreover, when a nav is open and if you exit the div and come back the animation happens again.
A) Is there a way to fix the issue with going from second to third navigation
B) how do I write a conditional statement so that if a user is with in a section lets say Future Generation and goes outsize the div and comes back it doesn't repeat the close and opening thing again.
CODES at
http://jsfiddle.net/rexonms/Hj9my/1/
Note: I cannot use a different jQuery beside 1.2.6 and sorry for the messy HTML code, wanted to make sure it worked on the site, when it works here.
Fixed your accordion , had to lose some of you html as it was a bit confusing .
updated fiddle:
http://jsfiddle.net/Hj9my/3/
The code :
$(function() {
$(".menu").hover(function() {
$('.dropdown').removeClass('current').addClass('notcurrent');
$(this).find('.dropdown').removeClass('notcurrent').addClass('current');
$('.notcurrent').slideUp();
$('.current').slideDown();
}, function() {
});
});