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>