Modal Alert box for iphone using Jqtouch

Question

I am developing a simple iPhone web application. I am stuck with creating an alert box using jqtouch. Does anybody how to create a sample modal alert box on the iPhone? I don't want to use the existing JavaScript alert due the title bar problem.

Are sample code or references available?

Answer 1

You want to use the floaty extension. See a live example with your iPhone or Safari in DEV iPhone mode here: link text

The code to include on that page is listed on that page, view source. The extension is the JS file and these functions call it.

script src="../../extensions/jqt.floaty.js" type="application/x-javascript" charset="utf-8"

        $(function(){

            $('#togglefloaty').click(function(){
                $('.floaty').toggleFloaty();
                $(this).removeClass('active');
                return false;
            });

            $('#hidefloaty').click(function(){
                $('.floaty').hideFloaty();
                $(this).removeClass('active');
                return false;
            });

            $('div#jqt .floaty').makeFloaty({
                spacing: 20,
                time: '1s'
            });

        });

            <ul class="individual">
                <li><a href="#" id="hidefloaty">Hide Floaty</a></li>
                <li><a href="#" id="togglefloaty">Toggle Floaty</a></li>
            </ul>

Answer 2

In jQTouch demo you will find a demo named ext_floaty . You can use the floating window as alert.

Here is some relevant discussion

Answer 3

Well, I know this is almost a year old, but I was struggling with it and here are a couple of things I came across.

The floaty div needs to be outside of any of the jqt pages, meaning you can't really have a special floaty WITHIN a jqt page div.

For creating my floaty (a div with the id "notify_window"), starting hidden, I did this:

$('#notify_window').makeFloaty({spacing: 120, time: '1s'}).hide().toggleFloaty();

I create the floaty, hidden and then I toggle it "off", so when I call the floaty I do this:

$("#notify_window").show().toggleFloaty();

It's actually pretty straighforward.

Answer 4

http://docs.phonegap.com/phonegap_notification_notification.md.html#Notification