I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.
Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/
I have not included the modal due to the amount of extra code, however, here is a link to the actual page
to make the modal appear just click on the 'joey' link.
Thanks!
EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:
<script>
$(function () {
$('#fadein').on('click', function () {
$.fn.custombox( this {
effect: 'fadein'
});
return false;
});
});
</script>
This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??
You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:
function clearBox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "block";
}
Demo
Is this what you were looking for:
http://codepen.io/anon/pen/giFEL
Edited:
Explanation to the above link:
In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage i.e 50%, This will keep the div occupy space event if it is empty.
Next i am storing the html content to a hidden div element and restoring it back to the div when required.
Related
Actually i want to do open color box without popup and it need to be only show hide inside a div. can we target a div to open colorbox content.
<a href='#myGallery' class='group'>click here</a>
<div class=''><!--this must be container of colorbox, and disable popup-->
<div id="myGallery"><--some content with photo--></div>
</div>
function _teamPopup(){
$(".group").colorbox({
inline:true,
rel:'group',
href:$(this).attr('href'),
scrolling: false,
opacity:1,
width:100+"%",
});
}
on my web page , there is lot of thumbnails, when i click on it content must display without popup.and it can be next ,prev , close like colorbox group function.
please check below image and you can get some idea.
Use toggle function of jQuery to hide and show content inside an element
Why you want to change colorbox if its purpose is exactly to have a gallery popping up?
If you look around there are widgets more specific for the kind of problem you're having.
Check http://galleria.io/themes/classic/.
If you still don't like what you can find around why don't you just code the big div to change its image when clicking on a thumbnail?
I have a div set to display:none on pageload, and a button to open that div on click with this script.
<script>
$(document).ready(function(){
$('.buttonmain').click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
</script>
It works sometimes, but not every time.
I tried to put the script on the top, on the main page etc. Its all the same.
Its build on Bootstrap.
Any ideas someone?
Go to my site www.pb-studios.com, and click FIRMENKUNDE or PRIVATKUNDEN, doesnt matter. there is a button there under the intro text that says "Mehr über Uns". thats the button that is suppose to show/hide the div.
Try putting the script in the body, at the very bottom.
I have this HTML div with or withouth embeded content, I want to block right and left click.
So if the user clicks or right clicks nothing happens.
Can you do that with HTML/CSS/ Java Script ?
Basicly this is a question about breaking the rules, say you have an youtube embeded video in a div in html, how do you block the click from the user so that if he clicks the video he does not go to youtube dot com.
*note, i am not interested in youtube only, i just want a way to block clicks and right clicks in a div.
So take a much simple scenario:
In a basic HTML page, there is a div with absolute position and size, If the user clicks a link in that div I want it not to work, but if he clicks a link anywhere else on a page I want it to work.
Another way to do ignore the clicks is using css 'pointer-events'.
For instance:
div.style.pointerEvents = 'none'
OR
<div id="content" style="pointer-events:none;">
Use an overlay with a bigger DIV or use the following code
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
Guess this would help you:
function disableClick(){
if(window.event.target.id && window.event.target.id=="myDiv"){
window.event.preventDefault();
}
}
document.onclick = disableClick;
document.oncontextmenu = disableClick;
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
First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});