Coding guide: Confirmations

This is an archived page. It's not actively maintained.

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

Note: Some desktop browsers will show a scroll bar in these examples; that doesn't happen on mobile devices.

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>

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>

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>