Диалоги

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </div>
</div>

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </div>
</div>

<div class="mdui-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Отмена'
    },
    {
      text: 'Подтвердить',
      onClick: function(inst){
        mdui.alert('Обратный вызов при нажатии кнопки подтверждения');
      }
    }
  ]
});

// Только текст
mdui.alert('content');

// С заголовком и текстом
mdui.alert('content', 'title');

// С обратным вызовом
mdui.alert('content', 'title', function() {
  mdui.alert('Нажата кнопка подтверждения');
});

// С текстом и обратным вызовом
mdui.alert('content', function() {
  mdui.alert('Нажата кнопка подтверждения');
});

// С текстом и обратным вызовом подтверждения
mdui.confirm('content', function(){
  mdui.alert('Нажата кнопка подтверждения');
});

// С текстом, обратными вызовами подтверждения и отмены
mdui.confirm('content',
  function(){
    mdui.alert('Нажата кнопка подтверждения');
  },
  function(){
    mdui.alert('Нажата кнопка отмены');
  }
);

// С текстом, заголовком и обратным вызовом подтверждения
mdui.confirm('content', 'title', function(){
  mdui.alert('Нажата кнопка подтверждения');
});

// С текстом, заголовком, обратными вызовами подтверждения и отмены
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Нажата кнопка подтверждения');
  },
  function(){
    mdui.alert('Нажата кнопка отмены');
  }
);

// Однострочное текстовое поле
mdui.prompt('Это однострочное текстовое поле',
  function (value) {
    mdui.alert('Вы ввели:' + value + ', Нажата кнопка подтверждения');
  },
  function (value) {
    mdui.alert('Вы ввели:' + value + ', Нажата кнопка отмены');
  }
);

// Многострочное текстовое поле
mdui.prompt('Это многострочное текстовое поле',
  function (value) {
    mdui.alert('Вы ввели:' + value + ', Нажата кнопка подтверждения');
  },
  function (value) {
    mdui.alert('Вы ввели:' + value + ', Нажата кнопка отмены');
  },
  {
    type: 'textarea'
  }
);

// С заголовком
mdui.prompt('Введите текст', 'title',
  function (value) {
    mdui.alert('Вы ввели:' + value + ', Нажата кнопка подтверждения');
  },
  function (value) {
    mdui.alert('Вы ввели:' + value + ', Нажата кнопка отмены');
  }
);