AlloyUI modal reuse modal

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 в шаблоне, который был визуализирован.

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>