Модальное повторное использование AlloyUI

Я работаю над модальным окном AlloyUI, которое присутствует на многих страницах моего приложения. Модальная структура на самом деле такая же, единственное, что меняется, это текст bodyContent для каждой страницы. Я пытаюсь повторно использовать модальный скрипт AlloyUI, только обновляя параметр bodyContent, а не создавая 20 модальных скриптов для каждой страницы, но для меня это кошмар скриптов, так как я не нашел кода, на который я мог бы посмотреть. В качестве примера я создал jsfiddle, а ниже приведен сценарий, над которым я работал. Я был бы признателен за вашу помощь.

http://jsfiddle.net/x9t3q0bs/

YUI().use('aui-modal', function(Y) {

  var helpModConfIdent              = Y.one('#showHelpPageConfirmIdentification'),
      helpModQuestions              = Y.one('#showHelpPageQuestions'),
      helpPageConfirmIdentRetCust   = Y.one('#showHelpPageConfirmIdentRetCust')


  var modal = new Y.Modal({
    bodyContent: "<p>Here will show help modal1.</p>",
    centered: true,
    destroyOnHide: false,
    headerContent: '<h3>Help info</h3>',
    modal: true,
    render: '#modal',
    visible: false,
    width: 800, 
    toolbars: {
    }
  });



modal.addToolbar([{
    label: 'Close',
    cssClass: 'btn-primary-content',
    on: {
      click: function() {
        modal.hide();
      }
    }
  }]);

  modal2 = new Y.Modal(
      {
      bodyContent: "<p>Here will show help modal2.</p>",
        centered: true,
        destroyOnHide: false,
        headerContent: '<h3>Help info</h3>',
        modal: true,
        render: '#modal',
        visible: false,
        width: 800, 
        toolbars: {
        }
      }
    );





      if (helpModConfIdent) {
        helpModConfIdent.on('click', function (e) {
          modal.show();
        });
      } else if (helpModQuestions) {
        helpModQuestions.on('click', function (e) {
          modal2.show();
        });
      }

});

Спасибо


javascript twitter-bootstrap modal-dialog yui alloy-ui
person Adorablepolak    schedule 13.01.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

bodyContent — это один из атрибутов, который можно установить, если вы иметь доступ к модальному экземпляру. В противном случае вы всегда можете манипулировать html в отрендеренном шаблоне.

YUI().use('aui-modal', function(Y) {
 
 var modal = new Y.Modal({
    bodyContent: "<p>Default implementation</p>",
    centered: false,
    destroyOnHide: false,
    headerContent: '<h3>Help info</h3>',
    modal: true,
    render: '#modal',
    visible: false,
    width: 250
  });
      
      Y.one('#modalInstance').on('click', function(){
             modal.set('bodyContent', "<p>Something loaded using the orginal modal instance</p>")
             modal.show()
           }) 
   
      Y.one('#nodeInstance').on('click', function (e) {    
           Y.one('#modal .modal-content .modal-body').setHTML('<p>Set using the node instance</p>')
           modal.show()
        })
 
});
<script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

 
<div id='modalInstance'>Modal Instance</div>
<br/>
<div id='nodeInstance'>Node Instance</div>

<div class="yui3-skin-sam">
  <div id="modal"></div>
</div>

person Origineil    schedule 13.01.2015
comment
Спасибо большое Ориджин. Это действительно помогло мне. - person Adorablepolak; 15.01.2015
comment
Кстати, может быть, вы могли бы пролить свет на другую проблему с AlloyUI/yui, касающуюся проверки формы. Я разместил здесь еще один вопрос: stackoverflow.com/questions/27953713/yui- проверка группы ввода - person Adorablepolak; 15.01.2015
comment
Не могли бы вы также рассказать, как мы можем динамически добавлять или удалять кнопки из созданного модального окна. Спасибо. - person muasif80; 31.05.2015
comment
В порядке. Я посетил вашу страницу jsfiddle и обнаружил метод addtoolbar. Я думаю, это сработает. Хотя я не мог запустить эту страницу jsfiddle. Не знаю, как его запустить. - person muasif80; 31.05.2015
comment
@ muasif80 У скрипки в OP нет всего необходимого html для работы. И да, addToolbar — это один из способов манипулировать тем, какие элементы управления появляются в модальном окне. Пример официальной документации - person Origineil; 01.06.2015