IntroJs has a problem with the pop-up box used for bootbox

[sandheart]

IntroJs has a problem with the pop-up box used for bootbox

code:

var dialog = bootbox.dialog({
    title: 'A custom dialog with buttons and callbacks',
    message: "<p id='testBtn'>This dialog has buttons. Each button has it's own callback function.</p>",
    size: 'large',
    buttons: {
        cancel: {
            label: "I'm a cancel button!",
            className: 'btn-danger',
            callback: function(){
                console.log('Custom cancel clicked');
            }
        }
    }
});
introJs().setOptions({
    steps: [{
        element: '#testBtn',
        intro: 'asdfaf'
    }]
}).start();

[tarlepp]

try to trigger Intro.js start after the dialog has been rendered to DOM

[sandheart]

首先感谢您的回复， 现在启动顺序的问题已解决，但还有另外两个问题: 1、引导层出现后，原有的弹层附加了一个class：introjs-fixParent，因z-index属性改变，而被遮挡； 2、引导框因透明度问题，照成内容看不清；

[tarlepp]

Could you provide working plunker where we could actually see this happening and try to solve your issue there? Also could you keep your comments in English so we could understand you better.

[sandheart]

First of all, thank you for your reply.

Now the startup sequence problem has been solved, but there are two other problems:

1. After the appearance of the bootstrap layer, a class was added to the original shell layer: introjs-fixparent, which was occluded due to the change of z-index attribute;

2. The guide box cannot be seen clearly due to the transparency problem;

[sandheart]

This is the contrast after modifying class (.introjs-fixparent)

[tiesont]

I wouldn't classify this as a Bootbox issue, per se, given that we don't have any custom CSS. From just a quick review of Intro.js, I'd say this is an incompatibility with Bootstrap.

[sandheart]

Well, then, let's work it out ourselves, thank you

[tiesont]

You may find this useful: https://stackoverflow.com/a/28831079/534109

[tiesont]

Is this more or less what you're after? http://jsfiddle.net/e0yhg8to/1/

[sandheart]

Oh, sorry, that's the question for introjs