AlloyUI模態重用模態

Question

我正在開發一個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();
        });
      }

});

謝謝

Answer 1

如果您有權訪問模態實例，則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>