AlloyUI模态重用模态

Question

I'm working on a AlloyUI modal window that is present in many pages of my application. The modal structure is actually the same, the only thing that changes is the bodyContent text for each page. I'm trying to reuse the AlloyUI modal script, only updating the bodyContent parameter rather than create 20 modal scripts for each page, but it's script nightmare for me as I have not found any code I can look at. I created a jsfiddle as an example and down below is the script I've been working. I'd appreciate your help.

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

});

Thanks

Answer 1

The bodyContent is one of the attributes that is available to be set if you have access to the modal instance. Otherwise, you can always manipulate the html within the template that has been rendered.

 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>