0

I have custom code (kind of library) for opening modal dialogs

It looks like below;

_initRenderModal :  function(template, templateData, options){
    var me = this;
    // Default Options
    me.modalOptions = {
        backdrop    : 'static',
        keyboard    : true,
        width       : 900,
        show        : true,
        autoFocus   : true
    };


    var id = $(template).prop("id");

    me.configureModal();

    var $backdrop = $(".modal-backdrop:not([forModal])").attr("forModal", id);

    this.modalId = id;

},



hideModal : function(){
    $(".modal[id='"+this.modalId+"']").modal("hide");
    $(".modal-backdrop[formodal='"+this.modalId+"']").remove();
},
removeModal : function(event){
    for(var i in this.destroyItems) {
      var item = this.destroyItems[i];
      if($.isFunction(this.destroyItems[i].destroy)) {
        this.destroyItems[i].destroy();
      }
      delete item;
    }
    this.destroyItems = [];
    this.hideModal();
    this.removeView();

    this.remove();
}

Also I am using Bootstrap 2.3.2 for the modal dialogs.

My question is while my custom code works fine for single open modal dialogs, it is creating issues when I am trying to open 2 simultaneous modal dialogs (i.e. opening a child modal from within the parent modal)

The issues are mainly to do with backdrop on the UI; I mean my child modal is slightly smaller and I can access the parent modal when I have the child modal open (I should not be able to access the parent modal when the child dialog is opened)

Please suggest how I can fix in the above code to handle for multiple open modal dialogs.

copenndthagen
  • 49,230
  • 102
  • 290
  • 442
  • There are a couple of things you can do to solve this. 1 Extend modals in bootstrap to have lock property and lock the parent modal when opening the child. 2 Ensure you have a reference to the parent modal when opening the child modal and apply some css alter the z-index of the child modal's backdrop. – benembery Jul 14 '14 at 14:42
  • This [question](http://stackoverflow.com/questions/9137311/how-to-extend-twitter-bootstrap-plugin/) shows you how to do 1. – benembery Jul 14 '14 at 15:01

0 Answers0