AlloyUI模态重用模态

Question

我正在开发 AlloyUI 模态window，它出现在我的应用程序的许多页面中。模式结构实际上是相同的，唯一改变的是每个页面的 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。

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>

AlloyUI模态重用模态

AlloyUI modal reuse modal

javascript

yui

modal-dialog

twitter-bootstrap

alloy-ui