In my html, I have the below link to show popup dialog.
<h2 class="modest-size-chart">
<a data-role="none" data-rel="popup" href="#sample_length_size_chart_popup" class="btn_size_chart">Size Chart</a>
</h2>
<div data-role="popup" id="sample_length_size_chart_popup" data-overlay-theme="b">
...
</div>
After click "Size Chart" from the page, popup dialog with id "sample_length_size_chart_popup" is shown. The default position of the dialog is in the center of the mobile screen.
When scrolling up/down the page, the popup will be moved up/down together with page. It's expected.
However, at some times (especially, the popup dialog is hidden and shown again), the popup dialog will be flickered and re-positioned at the center of the screen.
I don't want the re-position, it should be in the same position related to the page. Any suggestions?
Set popup position to be relative to a specific element, adding:
data-position-to="#fixedElement"
to <div data-role="popup" ... >. This way the popup should always open near #fixedElement. You must use a :visible element, positioned according to your needs.
Related
In my page, I have a modal that opens when a button is clicked. But it looks wonky because two scrollbars show up:
The css I used: https://codepen.io/bootpen/pen/jbbaRa?editors=1100
I want it to have only the scrollbar for the modal when the modal is open and switch back to the parent scrollbar when closed. I tried doing it with overflow-y: hidden, but that disables scrolling instead.
What am I missing here?
Its not showing me two scrollbars when I see your project on Codepen
I think there is a problem with your Browser
What I am trying to implement is a popup window with pure CSS, i.e. without using JavaScript. I have come up with a solution using the target pseudoclass, but the problem is that whenever I click the close button of the popup, it scrolls the viewport to the href element I specified, in this case #home. What I want to achieve is a functionality where the viewport doesn't move, regardless of the scroll position. For example, if I open the popup and then scroll to the last section, and then click the close button, the viewport should stay at the last section.
Here is jsFiddle: https://jsfiddle.net/tmzjpwkz/6/
replace href with #popup:target
Close
https://jsfiddle.net/tmzjpwkz/8/
I have a popup on my page, it display on clicking any div on the page.
There are multiple divs, with which this popup is associated.
Now the issue is if i click on div, popup gets open, but if i scroll, popup also scroll and come to wrong div.
How to make it fixed to its associated div after click?
Here is a quick example. I'm hoping this is something like what you're talking about. When the first box is clicked, an alert pops up and stays with the first box when scrolling.
I used simple jQuery to create the popup.
$('.box').click(function() {
$('.alert').css('display', 'block');
});
http://jsfiddle.net/d8xwev9o/
I'm working on jQuery mobile. I have an overlay which pops out on tap of a button in the header. The overlay appears close to the button.
<div data-role="header" data-position="fixed" data-theme="a" data-tap-toggle="false">
<h1>Photos</h1>
<a href="#photomenu" data-icon="gear" data-iconpos="notext"
data-rel="popup" data-transition="slidedown"></a>
</div>
But on orientation change the overlay appears at the center.
How to retain the position of the overlay on orientation change? Any help is appreciated.
By default, popups open centered vertically and horizontally over the thing you clicked (the origin) which is good for popups used as tooltips or menus. The framework also applies some basic collision detection rules to ensure that the popup will appear on-screen so the ultimate position may not always be centered over the origin.
For situations like a dialog or lightbox where the popup should appear centered within the window instead of over the origin, add the data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of position-to in addition to origin and window. For example, if you add data-position-to="#myElement" the popup will be positioned over the element with the id myElement.
Position to window
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
I have also made you a live jsfiddle example: http://jsfiddle.net/Gajotres/8xCYB/
I'm having trouble applying the various slide panel plugins to a div within a page. So, not from the top, side or bottom of the browser window, but from somewhere within the page.
This would work...
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
but the div slides out of view, so there's no tab to click on to slide it back up.
I could use a separate element to initiate the click function, but I need the clickable element to act as a tab connected to the sliding div.
So when the page loads, you'd see a panel in the middle of the screen, which would have a small tab sticking out of the bottom of that panel. When the tab is clicked, it slides up along with a panel with additional information. When the tab is clicked again, it slides back down.
Any help is appreciated.
You'd need to add in another div right next to it to use as a toggling tab, one that won't be hidden. Have that tab hide/show the div you want hidden.
$("#tab").click(function () {
$("#slider").slideToggle("slow");
});
See this fiddle: http://jsfiddle.net/Jxbkj/