I want to show native alert box for iphone using jquery mobile

Question

I have written following code to show a native alert box on iPhone using jQuery mobile + HTML.

alert('ID not Match !');

It is giving me the native alert, but I want to be able to change the title. Please tell me how to change/give a title to an alert box.

This is how the alert is displayed on iOS:

also see my custom dialog. But it does not look like a native alert/ dialog:

My custom dialog does not look native. Please help me.

Answer 1

<div data-role="dialog" id="sure" data-title="Are you sure?">
  <div data-role="content">
    <h3 class="sure-1">???</h3>
    <p class="sure-2">???</p>
    <a href="#" class="sure-do" data-role="button" data-theme="b" data-rel="back">Yes</a>
    <a href="#" data-role="button" data-theme="c" data-rel="back">No</a>
  </div>
</div>

And this:

function areYouSure(text1, text2, button, callback) {
  $("#sure .sure-1").text(text1);
  $("#sure .sure-2").text(text2);
  $("#sure .sure-do").text(button).on("click.sure", function() {
    callback();
    $(this).off("click.sure");
  });
  $.mobile.changePage("#sure");
}

You can use these wherever you need the confirmation dialog:

areYouSure("Are you sure?", "---description---", "Exit", function() {
  // user has confirmed, do stuff
});

And also refer this : http://dev.jtsage.com/jQM-SimpleDialog/demos2/popup.html