I'm using jQuery mobile for a project and need to react to vclick events when a popup is opened.
My problem is that the vclick event is just fired inside the popup, not on the whole page.
You can find a minimal example here.
Thanks in advance for your help!
Your code works correctly, I dont know if this was your intention but you are using popup overlay panel. Unlike normal panel in jQuery Mobile 1.3 version, popup overlay panel has an hidden div witch stretches full width and full height of the screen.
What looks like a click on a mail page is just a click on a hidden overlay div.
You can even test this, use Firefox or Chrome and take a look at a popup HTML, you will find that DIV.
In your case this DIv is a problem:
<div id="panelPopup-screen" class="ui-popup-screen in" style="height: 611px;"></div>
You can always switch to jQuery Mobile 1.3 RC1, use its panel, just make it semi transparent.
EDIT :
Found a solution for you, here's a live working jsFiddle example: http://jsfiddle.net/SC8hH/
This will fix your problem:
#panelPopup-screen {
display: none;
}
Related
The jquery picker and the select option works well when it is on the full-screen desktop. But when I resize the browser view, nothing shows up when I click on them.
This is the link: http://www.yiyalo.com
here is the source code: https://github.com/stephenleong/MyProject
there is nothing wrong with the JQuery. you made a mistake in using BootStrap's grid. there is a "col-md-1" in your page which expands in mobile view and covers the form controls. you need to rewrite your grid. take a look at BootStrap's Grid system
I'm using a modal box to display my advertising work for my portfolio. The modals are functioning properly for the most part, but it seems like the content within the modals is blocking my navbar at the top.
Without dynamically loading the content, is there a way to make the content of the modals not interfere with the navbar? I tried giving the navbar a higher z-index, but that didn't seem to do the trick. I gave the modal content as well as the modal.backdrop a lower z-index, but nothing seems to be doing the trick.
Here is a link to the page: http://0034191.netsolhost.com/ryancurtis/advertising.html
This might by an easy fix, but I've tried everything within my skill set. I'm pretty new to bootstrap.
Don't make the dialog modal. You can still pop-up the dialog, but don't make it modal. Modal prevents the user from seeing/interacting with what lies beneath.
It's easier to see the distinction via this example from the jQueryUI dialog (a very similar system).
I'm not fluent with bootstrap, but it appears that you would make your dialog an alert rather than a model.
Note that you can mix/intermingle bootstrap with jQueryUI if you wished to do so. They both run on top of jQuery, just include both libraries.
why dont u give padding/top margin for modal?
i guess its simplest solution..
<style>
.modal {
margin-top:50px;
}
</style>
or with JS
<script>
{
$("#myModal").animate({"width":"1100px","left":"30%"},3000,'easeInCirc');
}
</script>
I'm using the jQueryUI (extension?) and have a simple overlay on a page. Here's what I have so far
Anyway is there any built in way to grey out the screen when the dialog is open? I know you can do this by appending another div to the page, I want to know if jQueryUI has something like this built in.
I couldn't find anything like this on the API, maybe I missed something.
You can specify options for the dialog using an object literal. One of these options is modal which will place an overlay on the screen behind the dialog. This overlay will prevent the user from clicking behind the dialog.
$('#over').dialog({modal:true});
Example: http://jsfiddle.net/vhA2w/1/
Checkout all of the available options at: http://jqueryui.com/demos/dialog/
This jsfiddle should work for you
$('#over').dialog({ modal: true });
Please see code at http://cyclestreets.darkgreener.com/location/ - if necessary, go to a London, UK location to see some markers)
When you click on a marker, a jQuery mobile dialog opens. However, the CSS is broken - it's against a black background.
(Compare the About and Prefs dialogs on the home page to see the correct CSS.)
It looks as though some of the dialog classes are not being applied to the content div.
Can anyone explain how to fix this?
The jquery mobile dialogs appear against a black background because the parent page is removed from the DOM as soon as the transition completes.
You can get more standard looking dialogs with a couple of changes to the css and transition code:
https://github.com/jquery/jquery-mobile/pull/2380
when you visit http://www.daniweb.com you get a popup window, what is this called + any idea how to do it?
Thank you for your reply, what is the simplest way to do have a modal loading animation only i.e. when page loads that animations shows and when done the animation goes? ASP.NET/Ajax
You'd call this a modal dialog, and you can implement one very easy with jquery ui:
http://jqueryui.com/demos/dialog/#modal
I like to refer to these windows as ANNOYING
The other name is some form of JS or JQuery.
Its called a javascript popup window.
Here's a link to show you how to open a js window
The way it looks though is they are using the modal popup extender provided by the ASP.net AJAX Control library. This can be simulated via JQuery as well.
It's called a modal dialog window. "Modal" meaning "mode" as in the UI has two modes, one where you can only interact with the dialog window, the other where there is no dialog window and you can interact with the rest of the page.
Probably looks something like a lightbox/thickbox .Showing some text/html instead of images
This is a modal pop up window, meaning you can't do anything else while that window is open.
Here are a bunch of ways to make them.
You can set up this kind of popup by having Javascript on the onload event create an overlay div that has height 100% and a higher z-index than the content, and also a div for the popup with position fixed and an even higher z-index. Then when the user clicks on close or otherwise it is time for the popup to go away, the Javascript can set display: none on these divs.
You can use Firebug (or IE Developer toolbar) to see the styles used on the example page you mentioned and use that as a model.
(Also they are annoying, but at least better than pop-unders, IMO ;-) )
Thats a modal dialog popup. Here's a nice jQuery version that I have used before.