Question

我需要显示一个警报框，同时覆盖我的HTML页面上的内容。基本上，当我的警报弹出窗口出现时，我希望背景为空白或白色。我尝试了以下类似操作，但不起作用。

<androidx.cardview.widget.CardView
        android:layout_width="0dp"
        android:layout_height="180dp"
        android:id="@+id/cardView" app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:elevation="0dp"
        app:cardElevation="0dp"
        app:cardCornerRadius="5dp"
        app:cardBackgroundColor="@color/colorAccent"
        android:layout_marginStart="8dp" android:layout_marginEnd="9dp"
        app:layout_constraintHorizontal_bias="0.0" android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="parent">
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView android:layout_width="180dp"
                                   android:layout_height="100dp"
                                   android:id="@+id/view"
                                   android:background="@color/cardview_dark_background"
                                   android:layout_marginTop="8dp"
                                   app:cardCornerRadius="5dp"
                                   app:cardBackgroundColor="@color/colorPrimaryDark"
                                   app:layout_constraintTop_toTopOf="@+id/cardView"
                                   app:layout_constraintBottom_toTopOf="@+id/cardView"
                                   app:layout_constraintStart_toStartOf="parent"
                                   android:layout_marginStart="8dp"
                                   app:layout_constraintEnd_toEndOf="parent"
                                   android:layout_marginEnd="8dp">

</androidx.cardview.widget.CardView>

Answer 1

更改背景颜色不会隐藏页面上的任何元素。您很可能需要一个叠加层，可以是一个简单的div样式，如下所示：

.overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:999; /* adjust the z-index as you need it */
    background:#fff;
    display:none;
}

然后您可以在警报之前显示叠加层，然后在其后隐藏

function toggleOverlay( show ){
    document.querySelector('.overlay').style.display = (show === true) ? 'block' : 'none';
}

// ...

toggleOverlay(true);
// Kudos to Kobe for pointing out that the alert is triggered before the repaint
// simple way to solve the problem is a timeout, which will
// make the browser paint the changes before the alert is triggered
setTimeout(function(){
    alert('Something');
    toggleOverlay(false);
}, 0);

这是一个有效的jsFiddle：https://jsfiddle.net/UsernamesSuck/cpdrtgb8/2/

Answer 2

您可以创建一个绝对定位的div（其z-index大于所有内容）以隐藏它：

rXsf8YsgKTTNVFCvlB6Wf0oIomaXegUNrcqZx4xvH4KrgmjSVBBx7z6mb624K9uyoo65l48KqOmLdFkljRavW7bVw1XdQxHh9kkLXupkL6hcWnNM3R8nPqjGCWLaI8GU
Kax7v0ZbJEOVTIQpmJcXR8WiUclYJd24kDcMrlk4ptJhT1LnrR1HKx63BujfJeHFQvFqXQNRqxCN1nEbWmHUQZXDrFE2RP64h3kiQ4iETCA0iQVeYxClNz8LWg9NAMAr
UbKIhLK9Moa3TAcNvqLtL84WqA7or8YFpoYAyrvYVCVxbowx586ubXFEM4qcKZ01uIPh756cVLzqtASyfUzKzTOInYUft1Tlqsj4lUubTIRPZWAaYDfyJQsmmPflqeCQ
GsScuVNrowZ8jQIRoTtm69Pq9SuuFh71cI9DZEv9pHQLiVzwf1yn3QmTTSFSL4NMB0A5cmSwXq7tsBxOU0u7by7pNOSe2ujNyciyTzkkeeQJpiA62QYUdkamN2ioATfK
FazV7yHxU3cszPI8YuCjJvCbm2ObhNNVaMLI9ePQzPmLEdDudg0BHW1lFXSbHRfEabXEaeSgW8jXIG4p2E2ntN52m3TbuDiX9Ku1wlQSvAoezb7C9QWPowXTqn16gftk
tWRYlzaeblz0eroMMlhMKihpQ9MZ4plQbh4Bf6aPEMorEBqFA3QBVRjwRHOygGHMpGkOyAoSuZt8myTg1OiqSWn05POj1K8yvyfOgbaKqxr15ZS1Ly9H5XokxEqgpnQJ
HeHMgwdWJuSZo3d7tSrXXgNTZcsqfVYRD5Gx9dqPU02UqPEiSzlS97wKIoH3mc8g4I9QUjWE6B5Y7LUH2tQNcA5Mhw0zksOkZM4ULewAUIPwZLS31fL9iUueBJU1QIVq
7sdsPPel47kSuxSnuQgzbUCVrLcE1dZM0b9mEoJfoLEe44E1TqYFQEvh2i2HnJSx8EAjuNC3h5PUeRR9z2l2iZvRxkrhcNmmY9Oa64UY95DtTu15FQH25wqNk5qdLmb0
kd3coEgEjutjs4GgMlYSI15uR8jmtKqxeDpdb9kxMB9jIpzAe0hCQJHGTMiPcAHmwKolU0b05Qidsuce0hFyabl5oDnR3hBFSPonbNRlLvIhE2l3f2pm3LFYiFvMasSP
XVTLX1CXSmpJA14dS5Yp1CZg3HvV9YBHoaNz0OSMezBS1fuYmtamTPAjTEZ6KVj25ATL35Jd1vzVINy1ZbfVlYUaFYsHilV86FXyhsZ9NnwvFf0V3nMLTzHQSV5FiS3c

const hide = () => {
  var div = document.getElementById('hide')
  div.style.display = 'block'
  setTimeout(() => {
    alert()
    div.style.display = 'none'
  }, 0)
}

.hide {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: blue;
  z-index: 1000;
  display: none;
}

由于警报被阻止，您可以在警报后立即删除样式，该样式将在警报关闭后生效。

Answer 3

问题在于调用alert()时脚本的其余部分暂停。一种解决方案是将其包装在setTimeout()函数中，以使其异步以允许其余代码被执行。

请看以下小提琴以获得可能的解决方案： https://jsfiddle.net/hckevbtp/

Answer 4

您可以将display='none'用于容器，并按如下所示在setTimeout()中调用警报-

function openAlert() {
    document.getElementsByClassName('block')[0].style.display = 'none';
    setTimeout(function() {
        alert('hello world!');
        document.getElementsByClassName('block')[0].style.display = 'block';
    }, 100);
}

html-

<body>
    <div class='block'>
        <button onclick={openAlert()}>hello</button>
    </div>
</body>

Answer 5

尝试一下：

if (something happens) {

    changeBackgroundColor();

    setTimeout(function() {alert("hey");}, 0)
}

..
....
.....

function changeBackgroundColor() {
    document.body.style.opacity= "0";
}

Answer 6

您可以使用以下代码：

    function showMessage() {
      var div = document.getElementById('div');
      if(div == null){
        div = document.createElement('div');
        div.id = "div";
      }
      div.classList.add('alert')
      document.body.appendChild(div)
      setTimeout(function() {
        alert("alert text");
        div.classList.remove('alert');
      },0)
    }

样式：

        .alert {
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          position: absolute;
          background-color: white;
        }

使用空白背景屏幕创建警报弹出窗口

6 个答案: