Coding guide: Confirmations

Here you can find examples of how to create confirmations on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.

Implementing confirmations

To implement a confirmation panel using the styles shown here, place the CSS and media files into your app and then import the CSS using the @import at-rule:

@import url(resources/confirm.css);

Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

Examples

Simple confirmation box

This code implements a simple confirmation box with a title and a body message.

HTML

<form role="dialog" data-type="confirm">
  <section>
    <h1>Confirmation</h1>
    <p>Are you sure you want to delete this contact?</p>
  </section>
  <menu>
    <button>Cancel</button>
    <button class="danger">Delete</button>
  </menu>
</form>

@import url(https://developer.mozilla.org/media/gaia/shared/style/confirm.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }

Confirmation without a title

HTML

<form role="dialog" data-type="confirm">
  <section>
    <p>Are you sure you want to delete this contact?</p>
  </section>
  <menu>
    <button>Cancel</button>
    <button class="danger">Delete</button>
  </menu>
</form>

@import url(https://developer.mozilla.org/media/gaia/shared/style/confirm.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }

Confirmation with body content

HTML

<form role="dialog" data-type="confirm">
  <section>
    <h1>Confirmation</h1>
    <p>
      <img alt="Lightbox Icon" src="data:image/png;base64,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%3D%3D">
      <strong>Lightbox</strong>
      <small>Lightbox Enterprises LLC.</small>
    </p>
    <p>Do you want to download and install this application?</p>
  </section>
  <menu>
    <button>Cancel</button>
    <button class="recommend">Install</button>
  </menu>
</form>

@import url(https://developer.mozilla.org/media/gaia/shared/style/confirm.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }