需要启动多个jquery对话框

Question

这里，我有一个使用ember组件的jquery对话框。我想要一个多重对话框。

在我的js中：

App.IndexRoute = Ember.Route.extend({

  actions: {
    test: function () {
      var self = this;
      self.get('controller').set('isConfirmDialog', true);  // No I18N
      self.get('controller').set('dialogContent', "Hi, Alert!");  // No I18N
    }
  }
});

App.IndexController = Ember.Controller.extend({
    isConfirmDialog: false,
    dialogContent: ''
});
App.ConfirmDialogComponent = Ember.Component.extend({

    defaultOptions: { 
        height:'300', // No I18N
        width: '300', // No I18N
        modal: true, // No I18N
        title: 'Alert', // No I18N
    },
    didInsertElement: function(){
        var self = this; // No I18N
        self.send("showConfirmDialog"); // No I18N
    $("#dialogdiv").bind('dialogclose', function(){ // No I18N
        $("#dialogdiv").html('').dialog('destroy'); // No I18N
        self.sendAction('dialogreset'); // No I18N
    });
},
actions: {

    showConfirmDialog: function(){
        var self = this; 
        self.set('defaultOptions', $.extend( {}, self.get('defaultOptions'), self.get('dialogObj') )); // No I18N

        $( "#dialogdiv" ).dialog( self.get('defaultOptions') ); // No I18N
    }
}

});

在我的模板中：

<script type="text/x-handlebars" data-template-name="index">
   <button {{action "test"}}>Alert</button>
   {{#if controller.isConfirmDialog }}   
       {{confirm-dialog dialogContent=dialogContent dialogreset='resetDialog'}}  
   {{/if}}   
</script> 

 <script type="text/x-handlebars" data-template-name="components/confirm-dialog">
     <div id="dialogdiv">{{{controller.dialogContent}}}</div>
 </script>

这就是我初始化对话框组件的方法。如果我需要在该对话框中启动其他对话框，同时单击内容＆＃34;嗨，警告！＆＃34;，我该怎么办？如果我遗漏任何逻辑或任何东西，请告诉我。

我的工作链接：JSFIDDLE