引导模式在iPhone8、iPhone11上显示透明背景

Question

我在我的网站代码中有一些引导模式，它们可以正确地显示在iPad，MAC，windows和android手机上。但它们在iPhone8和更高版本上显示的是透明背景。它也在iPhone 5上工作。

​

<!--Open camera modal-->
<div id="opencamera" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <!--Open camera modal-->
        <div id="opencamera" class="modal fade" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>

              </div>
              <div class="modal-body">
                <h1 class="title">Camera Barcode Scan</h1>

                <div>
                  <a class="button" id="startButton">Start</a>
                  <a class="button" id="resetButton">Reset</a>
                </div>

                <div id="dave" style="visibility:hidden; height:1px;">
                  <video id="video" height="300" style="border: 1px solid gray"></video>
                </div>

                <div id="dave2" style="visibility:hidden; height:50px;">
                  <div id="sourceSelectPanel" style="display:none">
                    <label for="sourceSelect">Change video source:</label>
                    <select id="sourceSelect" style="max-width:400px">
                    </select>
                  </div>
                </div>

                <code id="result" style="display:none"></code>

                <div>
                  <audio id="myAudio" preload="auto">
                        <source src="beep.wav" type="audio/wav">
                    </audio>
                  <button id="play" style="display:none">Click</button>

                </div>
              </div>
              <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal">Cancel</button>
                <button class="btn btn-success" id="addqtybtn" style="display:none" data-dismiss="modal" onclick="addqty()">Next</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">

        <h1 class="title">Camera Barcode Scan</h1>

        <div>
          <a class="button" id="startButton">Start</a>
          <a class="button" id="resetButton">Reset</a>
        </div>

        <div id="dave" style="visibility:hidden; height:1px;">
          <video id="video" height="300" style="border: 1px solid gray"></video>
        </div>

        <div id="dave2" style="visibility:hidden; height:50px;">
          <div id="sourceSelectPanel" style="display:none">
            <label for="sourceSelect">Change video source:</label>
            <select id="sourceSelect" style="max-width:400px">
            </select>
          </div>
        </div>

        <code id="result" style="display:none"></code>

        <div>
          <audio id="myAudio" preload="auto">
            <source src="beep.wav" type="audio/wav">
            </audio>
          <button id="play" style="display:none">Click</button>

        </div>
      </div>
      <div class="modal-footer">

        <button class="btn btn-success" data-dismiss="modal">Cancel</button>
        <button class="btn btn-success" id="addqtybtn" style="display:none" data-dismiss="modal" onclick="addqty()">Next</button>

      </div>

    </div>

  </div>
</div>

​

我使用上面的代码来生成一个引导模式窗口。

Answer 1

移除父div的淡入淡出类对我有效。现在，Modal可以在iPhone 8、iPhone 11上正常工作