Как наложить всплывающее окно оповещения на адаптивный веб-сайт для каждого разрешения окна?

Question

(см. Изображение ниже для иллюстрации)

Я создаю свой адаптивный веб-сайт с помощью Bootstrap 4. Я хочу создать окно предупреждения, отображаемое в нижней части страницы и наложенное на все элементы каждого размера веб-страницы.

Это окно с предупреждением отображается, если щелкнуть каждое поле (на рисунке: серые области, содержащие «Некоторый текст») и исчезнуть через 2 секунды.

Мне нужна помощь о том, как наложить окно предупреждения дажеесли размер окна равен.

Я также прилагаю некоторый код информации.

Заранее спасибо.

Изображение

HTML

 <div class="container-fluid">
        <div class="row">
            <div class="card-group">

               <div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h5>.....Some Text.....</h5>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h5>.....Some Text.....</h5>
                        </div>
                    </div>
                </div>

                (More div blocks here)
            </div>
        </div>
    </div>

CSS

 

    .card{
    width: 14rem; 
    height: 8rem; 
    background-color: #e2e2e2;
    transition: 0.3s;
    color: #333333;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.card:hover{ 
    background-color: rgba(71, 172, 255,1);
    cursor: pointer;
}
.card-body{
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center
}

Answer 1

Добавление этого может помочь

.alert-box{
    position: fixed;
    bottom: 10px;
    width: 80vw;
}

position: fixed; фиксирует положение, bottom: 10px сместит окно оповещения на 10 пикселей снизу, а width: 80vw; сохранит его ширину в соответствии с размером области просмотра.

Answer 2

См. Фрагмент кода,

Если вы хотите создать свой собственный дизайн предупреждений, вы можете сделать это аналогичным образом.

Если вам нужно, чтобы окно оповещения находилось в одном и том же месте каждый раз, взгляните на css для .alert-fixed replace alert alert-primary во фрагменте кода с .alert-fixed.

Надеюсь, это поможет.

.card{
    width: 14rem; 
    height: 8rem; 
    background-color: #e2e2e2;
    transition: 0.3s;
    color: #333333;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
   
}
.card:hover{ 
    background-color: rgba(71, 172, 255,1);
    cursor: pointer;
}
.card-body{
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center
}

.alert-fixed
{
position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 50px;
    
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
        <div class="row">
            <div class="card-group">

               <div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h5>.....Some Text.....</h5>
                        </div>
                    </div>
                </div>

             
                 <div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h5>.....Some Text.....</h5>
                        </div>
                    </div>
                </div>
      </div>
        </div>
 
            
        <div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
            
     
            </div>