In this tutorial we look at Framework7 modals. A modal is basically a dialog and in framework7 we can create nice-looking material and IOS modals.

Here’s an example of Material Modal in Framework7:

Framework7 modal

Framework7 modal

 

Here’s an example of iOS Framework7 modal

Framework7 iOS modal

Framework7 iOS modal

They look awesome.

We show how to render text, custom title and even callbacks in these modals.

If you prefer video check our video tutorial here:

What is Framework7?

Framework7 – is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel.

Framework7 allows you easily create your apps using client side web technologies like HTML, CSS and Javascript.

Framework7 Dialogs/Modals

A dialog can also be called a modal and is a small content pane that pops up over App’s main content.

Normally you use dialogs to notify, inform or warn the user or even report errors.

Framework7 allows us create dialogs with either material design theme or iOS theme.

Let’s go. We are working with ES6(ECMAScript 2015) so as to write clean object oriented javascript code.

main.js

// /*
//  -Initialize your app
//  -Export selectors engine
//  */

const myApp=new Framework7();
const $$=Dom7;

class MainClass {
    constructor () {
    }

    initializeApp() {
        $$('#cyanBtn').on('click', () => {
            myApp.alert("Out beyond ideas of wrongdoing and rightdoing there is a field. I'll meet you there. When the soul lies down in that grass the world is too full to talk about.");
        });
        $$('#tealBtn').on('click', () => {
            myApp.alert("Out beyond ideas of wrongdoing and rightdoing there is a field. I'll meet you there. When the soul lies down in that grass the world is too full to talk about.","Rumi Quote");
        });
        $$('#greenBtn').on('click', () => {
            myApp.alert("Out beyond ideas of wrongdoing and rightdoing there is a field. I'll meet you there. When the soul lies down in that grass the world is too full to talk about.",() => {
                alert('When you do things from your soul, you feel a river moving in you, a joy.');
            });
        });
        $$('#blueBtn').on('click', () => {
            myApp.alert("Out beyond ideas of wrongdoing and rightdoing there is a field. I'll meet you there. When the soul lies down in that grass the world is too full to talk about.","Rumi Quotes",() => {
                alert('The wound is the place where the Light enters you.');
            });
        });
    }
}

const m=new MainClass();
m.initializeApp();

index.html

This is our index.html file. It is our user interface.

<!DOCTYPE html>
<html>
  <head>
    <!--META ATTRIBUTES-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>Camposha.info</title>

    <!-- REFERENCE CSS-->
    <!-- <link rel="stylesheet" href="assets/css/framework7.ios.min.css">
    <link rel="stylesheet" href="assets/css/framework7.ios.colors.min.css"> -->
    <link rel="stylesheet" href="assets/css/framework7.material.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">

  </head>
  <body>

    <!-- VIEWS-->
    <div class="views">

      <!-- Your main view, should have "view-main" class-->
      <div class="view view-main">

        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">

            <!-- We have home navbar without left link-->
            <div class="center sliding">Camposha.info</div>
            <div class="right">
              <!-- Right link contains only icon - additional "icon-only" class-->
              <a href="#" class="link icon-only" onclick="alert('icon clicked')"> <i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>

        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">

          <!-- Page, data-page contains page name-->
          <div data-page="index" class="page">

            <!-- Scrollable page content-->
            <div class="page-content">
              <div class="content-block-title"><h1>Welcome To Camposha.</h1></div>
              <div class="content-block">
                <div class="content-block-inner">
                  <h5>Camposha.info is a tutorials website.</h5>
                  <P> We do Java,Javascript,C#, Python, PHP among other web technologies.</P>
                </div>
              </div>

              <div class="content-block-title">Material Alert Dialogs</div>
              <div class="content-block">
                <div class="row">
                  <div class="col-50"><a href="#" id="cyanBtn" class="button button-raised button-fill color-cyan">Text</a></div>
                  <div class="col-50"><a href="#" id="tealBtn" class="button button-raised button-fill color-teal">Text,Title</a></div>
                </div>
                <br>
                <div class="row">
                  <div class="col-50"><a href="#" id="greenBtn" class="button button-raised button-fill color-green">Text,CallBack</a></div>
                  <div class="col-50"><a href="#" id="blueBtn" class="button button-raised button-fill color-blue">Text,Title,CallBack</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner"><a href="#" class="link">Next</a><a href="#" class="link">Previous</a></div>
        </div>
      </div>
    </div>

    <!-- REFERENCE SCRIPTS-->
    <script type="text/javascript" src="assets/js/framework7.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
  </body>
</html>

Result

Modals with Custom Title and Text

 

Modals with Callback

Explanations

Initialize Framework7

We initialize Framework7 and Dom7. Framework7 of course is our framework while Dom7 is the selector engine used by Framework7 to select DOM elements.

const myApp=new Framework7();
const $$=Dom7;

Create ES6 Class

We create a ECMAScript class with a blank constructor. We will place our code inside this class.

class MainClass {
    constructor () {
    }
    initializeApp() {
      ...
    }
}

Show Framework7 dialog with Text

First we show a simple Framework7 alert dialog with only custom text.

        $$('#cyanBtn').on('click', () => {
            myApp.alert("Out beyond ideas of wrongdoing and rightdoing there is a field. I'll meet you there. When the soul lies down in that grass the world is too full to talk about.");
        });

Show Framework7 Dialog with Custom Title and Text

We will show this when the teal button is clicked:

        $$('#tealBtn').on('click', () => {
            myApp.alert("Out beyond ideas of wrongdoing and rightdoing there is a field. I'll meet you there. When the soul lies down in that grass the world is too full to talk about.",
            "Rumi Quote");
        });

Show Framework7 Dialogs with Custom Title, Text and Callbacks

Here we want to see how to handle callbacks when the user has clicked the OK button in our Framework7 dialog.

$$('#greenBtn').on('click', () => {
            myApp.alert("Out beyond ideas of wrongdoing and rightdoing there is a field. I'll meet you there. When the soul lies down in that grass the world is too full to talk about.",
            () => {
                alert('When you do things from your soul, you feel a river moving in you, a joy.');
            });
        });
        $$('#blueBtn').on('click', () => {
            myApp.alert("Out beyond ideas of wrongdoing and rightdoing there is a field. I'll meet you there. When the soul lies down in that grass the world is too full to talk about.",
            "Rumi Quotes",() => {
                alert('The wound is the place where the Light enters you.');
            });
        });

Best Regards.