I'm using the Twitter Bootstrap to make a project that opens modals with buttons. Each modal closes if you click on the same button that opens it. The modals will also close if you press escape or click on the background. However, if you click on the button to open one modal and then the button for another modal, the code opens both modals. If any modal is open, I want it to close when you click anywhere else on the page, including any of the other buttons. I'm really lost with the JavaScript, though.
Your question appears vague, so I will try to touch most of the points so that your question gets answered.
If you want the modal should not close on pressing esc or clicking some where else then try this....
<a data-controls-modal="your_div_id" data-backdrop="static"
data-keyboard="false" href="#">
To show a modal. use this inside a javascript function:
$('#myModal').modal('show')
To hide a modal use this:
$('#myModal').modal('hide')
To toggle a modal use this:
$('#myModal').modal('toggle')
Use these according to your need, hide a modal when you need may be on a button click.
I think this much is sufficient to achieve whatever you need.
If anything you aren't able to get something please post a comment.
Cheers!!!
Related
I'm hoping to use Fancybox2 to display a modal edit form for a rails 3.2 application, but if the end user clicks anywhere outside the modal window then fancybox closes.
Is there a way to disable that so the modal will not close (throwing away their edits) if they accidentally click on the underlying web page?
If not, can anyone suggest a simple rails 3.2 gem to implement modal popup form editing?
So I have a page and a dialog. When the user click the page button, one AJAX request will open the dialog with the results. Something like that simple example without AJAX: http://jsfiddle.net/rBBpx/
It works. The dialog opens programatically. But it hides the page content, showing the dialog as if it's another page. I know that popup's can open dialogs in-page with links, but I didn't get the point in how I can do that programatically.
I tried to change $.mobile.changePage() call to that, but it didn't worked as I expected:
$('#dialog').popup();
$('#dialog').popup('open');
How can I show that dialog in-page, as a popup? Is it ever possible? Thank you in advance!
In case you use phonegap, there is an alert plugin: http://docs.phonegap.com/en/edge/cordova_notification_notification.md.html
navigator.notification.alert("your AJAX result here");
sorry if my english bad
when I create a dialog popup with jquerymobile, I get a transparent background, but when I touched it, causing the closure of the dialogue, how do I make the dialog will not close when I touch the background until I touch the cancel button?
thank you
for example login form dialog button in demos jquerymobile
http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html
You can add data-dismissible="false" attribute as it describes in the document:
http://api.jquerymobile.com/popup/#option-dismissible
This behavior of a jQM popup is by design.
It looks like instead of a popup you just need to use a jQM modal dialog
I need to create the "Facebook iPad" look and feel using jQueryMobile.
I have a little question:
How to "stack" a page over the current page of my app from right to left?
(I need to mimic the same effect, when you want to reach an user page, means, the new page "overlays" the current one.. and so so..
if I click (or tap) to a link from the "stacked" page, I want a new one comes from right to left and "cover" the last staked page...
If close the latest inserted page, I want an slide effect from right to left and (destroy the closed page)
Any help?
Regards
U just need jquery-mobile transition effect & open the new page via AJAX technique-
<a href="newPage.html" data-transition="slide" >It will Slide</a>
U can put rel="external" or data-ajax="false" - to open as full page reload, without AJAX
I am writing a PhoneGap app using JQuery Mobile.
I change pages based on buttons and links that are clicked within the app. All of my views are encapsulated in a single index.html page. Different pages are broken up by div data role like so:
<div data-role="page" id="view1"></div>
<div data-role="page" id="view2"></div>
When a button is clicked the app moves the next view with:
$.mobile.changePage("#search2_1");
The problem is when a user is typing in a text box. The keyboard pops up with either the "Go" or "Search" buttons available. If the user clicks this, they bypass the javascript function that moves them to the next page and are inadvertently sent back to the root of the app.
Is there anyway to disable or remove these buttons or even have these buttons trigger the change page function?
*note: since this is a PhoneGap app I am limited in what I can do in Objective-C and I am focusing on doing this within the web page.
Since your elements are inside a form element the user submits the form by pressing the search or go button, which will reload the page.
you need to cancel the form submit.
This would look something like this in jquery:
$("yourform").submit(function(){
return false;
});
To answer the second part of the question, this is what I did:
$('#form').submit(function(e) {
e.preventDefault();
$('#button').trigger('click');
return false;
});
This prevents the default submit, and instead triggers the action you want.