bootboxjs / bootbox

Wrappers for JavaScript alert(), confirm() and other flexible dialogs using Twitter's bootstrap framework

Home Page:http://bootboxjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

I want to share my functionality > buttons on header > multiple modal layers

GrupoWebex opened this issue · comments

Hello. I rewrite my custom 5.5.2 version and i want to share my added functionality.
Maybe you could add to master version.

Commented with //custom > ....
+++++++ extra parameter (:162)


   //custom > button container
    buttonContainer: "footer"


+++++++ custom button append part (:284)


    //custom > add header template
    if(options.buttonContainer == 'header')
      header.append($('<div/>').addClass('modal-actions'));

    // Only attempt to create buttons if at least one has 
    // been defined in the options object
    if (getKeyLength(options.buttons) > 0) {
      each(buttons, function (key, b) {
        var button = $(templates.button);
        button.data('bb-handler', key);
        button.addClass(b.className);

        switch (key) {
          case 'ok':
          case 'confirm':
            button.addClass('bootbox-accept');
            break;

          case 'cancel':
            button.addClass('bootbox-cancel');
            break;
        }

        button.html(b.label);

        //custom > button container process
        if(options.buttonContainer == 'footer') {
          body.after(templates.footer);
          footer.append(button);
        }
        if(options.buttonContainer == 'header') {
          header.find('.modal-actions').append(button);
        }

        //custom > hide base footer append
        //footer.append(button);

        callbacks[key] = b.callback;
      });

      //custom > hide footer
      if(options.buttonContainer == 'footer') body.after(footer);
    }

+++++++ backdrop custom (:454)

//custom > backdrop same z-index > change position > multiple modal layers compatibility
    dialog.on("shown.bs.modal", function() {
      $(this).before($('.modal-backdrop:last-child'));
    });

Can you provide an example of what functionality this adds?

We would also need to see tests that show how your new features work.

https://jsfiddle.net/ubah9kex/2/

Not default button margins on headers is a chance.
Backdrop with same z-index cause animation problem. I think bootstrap backdrop should be positionated before modal by default.