javascript - Bootstrap 4 模态与 intro.js transparant

Question

以下example显示了在 intro.js 的第二步中激活的 Bootstrap 模式。不幸的是，我不知道如何让 intro.js 的叠加透明，以便您可以看到模态。另外，我想在这个 example 中添加一个进度条.希望有人可以帮助我。

HTML

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-step="1" data-intro="Open model" id='show-popup-button'>
  Launch demo modal
</button>

<button class="btn btn-primary btn-lg" id="start-intro-btn" data-step="3" data-intro="Close model">
  Launch intro
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content" data-step="2" data-intro="alignment model is not correct">
            <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">title</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" id='close-modal-button'>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed.</p>
                <p>Praesent sit amet porttitor magna, auctor feugiat tellus. Sed venenatis tortor turpis, vel vestibulum eros pulvinar et. Pellentesque hendrerit diam quis dui euismod tincidunt. Sed sit amet mauris ipsum. Integer in magna tellus. In tincidunt mi quis nunc gravida sollicitudin. Aliquam ac dui eget erat consequat volutpat in eu magna.</p>
                <p>Sed feugiat bibendum leo consequat convallis. Donec facilisis, turpis a scelerisque venenatis, felis diam dictum tortor, vitae imperdiet tortor ligula eu lectus. Donec iaculis semper elementum. Nullam dapibus porttitor magna quis convallis. Morbi porttitor quam non magna ullamcorper rhoncus. Phasellus sit amet nunc at turpis pharetra luctus a a massa. Praesent luctus massa in odio faucibus eleifend.</p>
                <p>In eget lobortis leo, ut luctus odio. Mauris pharetra erat ac tellus hendrerit semper. Cras faucibus ipsum id ante hendrerit rutrum. Donec vitae ullamcorper arcu. Aliquam pellentesque faucibus placerat. Aliquam erat volutpat. In tincidunt metus sit amet ligula sagittis vehicula. Pellentesque velit quam, hendrerit a erat ac, fermentum tincidunt enim. Cras suscipit justo nec consectetur lacinia.</p>
                <p>Cras pellentesque urna a leo egestas, at ullamcorper augue suscipit. Nulla id lacinia magna, non iaculis est. Praesent a placerat augue, eget eleifend purus. Aenean dignissim, orci et rutrum facilisis, tellus massa porta nulla, quis hendrerit dui ipsum vitae urna. In mattis lectus dolor, id venenatis lectus pellentesque at. Suspendisse posuere metus vel bibendum dignissim. Fusce interdum magna id libero scelerisque suscipit. Duis orci augue, rhoncus eget pharetra ac, viverra nec magna. In accumsan nulla ac suscipit pellentesque. Nulla iaculis luctus tellus, at ultricies urna hendrerit a. Aenean vehicula sodales varius. Duis sodales hendrerit odio non sagittis.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id='close-modal-button' data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JavaScript

var startIntroButton = $('#start-intro-btn');

startIntroButton.on('click', function() {
    var introJsStarted = introJs().start();
    introJsStarted
    .oncomplete(function() { $('#myModal').hide();
    }).onexit(function(){ $('#myModal').hide();
    }).onchange(function(targetElement) {
        if($(targetElement).attr("data-step") == 2) {
            $('#myModal').show();
        }   
        if($(targetElement).attr("data-step") != 2) {
            $('#myModal').hide();
        }
    });
});

var showPopupButton = $('#show-popup-button');
showPopupButton.on('click', function() {
   $('#myModal').show(); 
});
var closePopupButton = $('#close-modal-button');
closePopupButton.on('click', function() {
   $('#myModal').hide();  
});

CSS

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

body { margin: 20px; }

.introjs-overlay {
  position: absolute;
  box-sizing: content-box;
  z-index: 999999;
  background-color: #000;
  opacity: 0;
  background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(0, 0, 0, 0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";
  -ms-filter: "alpha(opacity=50)";
  filter: alpha(opacity=50);
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}

.introjs-fixParent {
  z-index: auto !important;
  opacity: 1.0 !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important
}

.introjs-showElement,
tr.introjs-showElement>td,
tr.introjs-showElement>th {
  z-index: 9999999 !important
}

.introjs-disableInteraction {
  z-index: 99999999 !important;
  position: absolute;
  background-color: white;
  opacity: 0;
  filter: alpha(opacity=0)
}

.introjs-relativePosition,
tr.introjs-showElement>td,
tr.introjs-showElement>th {
  position: relative
}

.introjs-helperLayer {
  box-sizing: content-box;
  position: absolute;
  z-index: 9999998;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, .9);
  border: 1px solid #777;
  border: 1px solid rgba(0, 0, 0, .5);
  border-radius: 4px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .4);
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}

.introjs-tooltipReferenceLayer {
  box-sizing: content-box;
  position: absolute;
  visibility: hidden;
  z-index: 10000000;
  background-color: transparent;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out
}

.introjs-helperLayer *,
.introjs-helperLayer *:before,
.introjs-helperLayer *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box
}

.introjs-helperNumberLayer {
  box-sizing: content-box;
  position: absolute;
  visibility: visible;
  top: -16px;
  left: -16px;
  z-index: 9999999999 !important;
  padding: 2px;
  font-family: Arial, verdana, tahoma;
  font-size: 13px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  background: #ff3019;
  background: -webkit-linear-gradient(top, #ff3019 0, #cf0404 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404));
  background: -moz-linear-gradient(top, #ff3019 0, #cf0404 100%);
  background: -ms-linear-gradient(top, #ff3019 0, #cf0404 100%);
  background: -o-linear-gradient(top, #ff3019 0, #cf0404 100%);
  background: linear-gradient(to bottom, #ff3019 0, #cf0404 100%);
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: 3px solid white;
  border-radius: 50%;
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0)";
  filter: "progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)";
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4)
}

.introjs-arrow {
  border: 5px solid white;
  content: '';
  position: absolute
}

.introjs-arrow.top {
  top: -10px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: white;
  border-left-color: transparent
}

.introjs-arrow.top-right {
  top: -10px;
  right: 10px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: white;
  border-left-color: transparent
}

.introjs-arrow.top-middle {
  top: -10px;
  left: 50%;
  margin-left: -5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: white;
  border-left-color: transparent
}

.introjs-arrow.right {
  right: -10px;
  top: 10px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: white
}

.introjs-arrow.right-bottom {
  bottom: 10px;
  right: -10px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: white
}

.introjs-arrow.bottom {
  bottom: -10px;
  border-top-color: white;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent
}

.introjs-arrow.left {
  left: -10px;
  top: 10px;
  border-top-color: transparent;
  border-right-color: white;
  border-bottom-color: transparent;
  border-left-color: transparent
}

.introjs-arrow.left-bottom {
  left: -10px;
  bottom: 10px;
  border-top-color: transparent;
  border-right-color: white;
  border-bottom-color: transparent;
  border-left-color: transparent
}

.introjs-tooltip {
  box-sizing: content-box;
  position: absolute;
  visibility: visible;
  padding: 10px;
  background-color: white;
  min-width: 200px;
  max-width: 300px;
  border-radius: 3px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .4);
  -webkit-transition: opacity .1s ease-out;
  -moz-transition: opacity .1s ease-out;
  -ms-transition: opacity .1s ease-out;
  -o-transition: opacity .1s ease-out;
  transition: opacity .1s ease-out
}

.introjs-tooltipbuttons {
  text-align: right;
  white-space: nowrap
}

.introjs-button {
  box-sizing: content-box;
  position: relative;
  overflow: visible;
  display: inline-block;
  padding: .3em .8em;
  border: 1px solid #d4d4d4;
  margin: 0;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;
  font: 11px/normal sans-serif;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  background-color: #ececec;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
  background-image: -moz-linear-gradient(#f4f4f4, #ececec);
  background-image: -o-linear-gradient(#f4f4f4, #ececec);
  background-image: linear-gradient(#f4f4f4, #ececec);
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  -o-background-clip: padding-box;
  -webkit-border-radius: .2em;
  -moz-border-radius: .2em;
  border-radius: .2em;
  zoom: 1;
  *display: inline;
  margin-top: 10px
}

.introjs-button:hover {
  border-color: #bcbcbc;
  text-decoration: none;
  box-shadow: 0 1px 1px #e3e3e3
}

.introjs-button:focus,
.introjs-button:active {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
  background-image: -moz-linear-gradient(#ececec, #f4f4f4);
  background-image: -o-linear-gradient(#ececec, #f4f4f4);
  background-image: linear-gradient(#ececec, #f4f4f4)
}

.introjs-button::-moz-focus-inner {
  padding: 0;
  border: 0
}

.introjs-skipbutton {
  box-sizing: content-box;
  margin-right: 5px;
  color: #7a7a7a
}

.introjs-prevbutton {
  -webkit-border-radius: .2em 0 0 .2em;
  -moz-border-radius: .2em 0 0 .2em;
  border-radius: .2em 0 0 .2em;
  border-right: 0
}

.introjs-prevbutton.introjs-fullbutton {
  border: 1px solid #d4d4d4;
  -webkit-border-radius: .2em;
  -moz-border-radius: .2em;
  border-radius: .2em
}

.introjs-nextbutton {
  -webkit-border-radius: 0 .2em .2em 0;
  -moz-border-radius: 0 .2em .2em 0;
  border-radius: 0 .2em .2em 0
}

.introjs-nextbutton.introjs-fullbutton {
  -webkit-border-radius: .2em;
  -moz-border-radius: .2em;
  border-radius: .2em
}

.introjs-disabled,
.introjs-disabled:hover,
.introjs-disabled:focus {
  color: #9a9a9a;
  border-color: #d4d4d4;
  box-shadow: none;
  cursor: default;
  background-color: #f4f4f4;
  background-image: none;
  text-decoration: none
}

.introjs-hidden {
  display: none
}

.introjs-bullets {
  text-align: center
}

.introjs-bullets ul {
  box-sizing: content-box;
  clear: both;
  margin: 15px auto 0;
  padding: 0;
  display: inline-block
}

.introjs-bullets ul li {
  box-sizing: content-box;
  list-style: none;
  float: left;
  margin: 0 2px
}

.introjs-bullets ul li a {
  box-sizing: content-box;
  display: block;
  width: 6px;
  height: 6px;
  background: #ccc;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-decoration: none;
  cursor: pointer
}

.introjs-bullets ul li a:hover {
  background: #999
}

.introjs-bullets ul li a.active {
  background: #999
}

.introjs-progress {
  box-sizing: content-box;
  overflow: hidden;
  height: 10px;
  margin: 10px 0 5px 0;
  border-radius: 4px;
  background-color: #ecf0f1
}

.introjs-progressbar {
  box-sizing: content-box;
  float: left;
  width: 0;
  height: 100%;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  background-color: #08c
}

.introjsFloatingElement {
  position: absolute;
  height: 0;
  width: 0;
  left: 50%;
  top: 50%
}

.introjs-fixedTooltip {
  position: fixed
}

.introjs-hint {
  box-sizing: content-box;
  position: absolute;
  background: transparent;
  width: 20px;
  height: 15px;
  cursor: pointer
}

.introjs-hint:focus {
  border: 0;
  outline: 0
}

.introjs-hidehint {
  display: none
}

.introjs-fixedhint {
  position: fixed
}

.introjs-hint:hover>.introjs-hint-pulse {
  border: 5px solid rgba(60, 60, 60, 0.57)
}

.introjs-hint-pulse {
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  border: 5px solid rgba(60, 60, 60, 0.27);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: rgba(136, 136, 136, 0.24);
  z-index: 10;
  position: absolute;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out
}

.introjs-hint-no-anim .introjs-hint-dot {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none
}

.introjs-hint-dot {
  box-sizing: content-box;
  border: 10px solid rgba(146, 146, 146, 0.36);
  background: transparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: introjspulse 3s ease-out;
  -moz-animation: introjspulse 3s ease-out;
  animation: introjspulse 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -25px;
  left: -25px;
  z-index: 1;
  opacity: 0
}

@-webkit-keyframes introjspulse {
  0% {
    -webkit-transform: scale(0);
    opacity: .0
  }
  25% {
    -webkit-transform: scale(0);
    opacity: .1
  }
  50% {
    -webkit-transform: scale(0.1);
    opacity: .3
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: .5
  }
  100% {
    -webkit-transform: scale(1);
    opacity: .0
  }
}

@-moz-keyframes introjspulse {
  0% {
    -moz-transform: scale(0);
    opacity: .0
  }
  25% {
    -moz-transform: scale(0);
    opacity: .1
  }
  50% {
    -moz-transform: scale(0.1);
    opacity: .3
  }
  75% {
    -moz-transform: scale(0.5);
    opacity: .5
  }
  100% {
    -moz-transform: scale(1);
    opacity: .0
  }
}

@keyframes introjspulse {
  0% {
    transform: scale(0);
    opacity: .0
  }
  25% {
    transform: scale(0);
    opacity: .1
  }
  50% {
    transform: scale(0.1);
    opacity: .3
  }
  75% {
    transform: scale(0.5);
    opacity: .5
  }
  100% {
    transform: scale(1);
    opacity: .0
  }
}

Answer 1

您可以将模态框放在叠加层前面，这样按钮仍会突出显示，但您可以在介绍控件后面看到模态框。这需要将 Bootstrap 的模式 z-index 设置为高于 introjs 覆盖层，并覆盖 introjs modal-fixer 样式。

.modal{
  z-index:1000000;
}

.introjs-fixParent.modal{
  z-index:10000000 !important;
}

脚本只是缺少 setOption('showProgress', true)

http://jsfiddle.net/vdgsfqcm/22/