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是可用于set的属性之一。否则，您始终可以在已呈现的模板中操作html。

＆＃13;

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()
        })
 
});

＆＃13;

<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>

＆＃13;

AlloyUI模态重用模态

1 个答案: