Используя диалог в Metro UI

Привет У меня есть вопрос о Metro UI (http://metroui.org.ua/dialog.html)Используя диалог в Metro UI

Я с помощью диалога, как это:

<div id="TestDialog" data-role="dialog" class="Dialog"> 

    <h1>Simple dialog</h1> 
    <p> 
     Dialog :: Metro UI CSS - The front-end framework 
     for developing projects on the web in Windows Metro Style. 
    </p> 
</div> 

<script type="text/javascript"> 

var x_dialog = $("#" + dialogId).data("dialog"); 

x_dialog.options = { 
    width: width, 
    height: height, 
    closeButton: true 
} 

x_dialog.open(); 
</script>

Но диалог не показывает с закрыть кнопку или мою желаемую ширину/высоту.

Есть ли полезные примеры для диалогов Metro UI? Я не нашел никого, и API из интерфейса Metro кажется приятным, но если вы ищете JavaScript с помощью Dialogs, вы не найдете никаких ...

источник

2015-05-12 Unlockedluca

прежде всего метро 3.0 до бета-версии, поэтому он, вероятно, будет все еще улучшаются. Он отличается от 2.0, он в значительной степени опирается на атрибуты данных html5 и, следовательно, может быть указан в html-коде, но все еще может быть изменен в javascript с помощью таких методов, как .attr ('data- *', ''). Вот рабочий код:

<script> 
     function showDialog(id){ 
      var dialog = $("#"+id).data('dialog'); 
      if (!dialog.element.data('opened')) { 
       dialog.open(); 
      } else { 
       dialog.close(); 
      } 
     } 
    </script> 

</head> 
<body onload="init()"> 
    <div class="container page-content"> 

     <div class="padding20 no-padding-right no-padding-left no-padding-top"> 
      <button class="button" onclick="showDialog('dialog')">Show dialog</button> 
     </div> 

     <div data-role="dialog" id="dialog" class="padding20" data-close-button="true" data-width="200" data-height="200"> 
      <h1>Simple dialog</h1> 
      <p> 
       test 
     </div> 

    </div> 

</body> 
</html>

Либо указать их на HTML или иметь его установить динамически на событие щелчка в сценарии JS. Что-то вроде этого:

$('.button').click(function() { 
$('#dialog').attr('data-width','200'); 
$('#dialog').attr('data-height','200'); 

showDialog('dialog'); 
});

Надеюсь, это поможет.

источник

2015-05-28 12:05:21 Orochi1992

Есть варианты, указанные здесь в http://metroui.org.ua/dialog.html , чтобы помочь вам настроить диалог по своему вкусу. Теперь ваш вопрос, ответ будет

<div id="TestDialog" data-role="dialog" class="Dialog" data-close-button="true" data-width="300" data-height="300">

вот и все. вы можете заменить ширину и высоту со значением по вашему выбору

для JavaScript, который поможет открыть и закрыть диалоговое

<script> 
function showDialog(id){ 
    var dialog = $(id).data('dialog'); 
    dialog.open(); 
} 
</script>

кнопку или любой другой ссылке, которая откроет диалоговое окно должно иметь это showDialog('#TestDialog')TestDalog является id Вы получили диалог div

<button onclick="showDialog('#TestDialog')">Show dialog</button>

источник

2015-09-08 09:28:03 Transformer

ответ

Смежные вопросы