Как загрузить оповещение в правом верхнем углу без нажатия кнопки в начальной загрузке или php?

Question

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

Ниже приведен код:

  <div class="row">
        <div class="col-md-3">
           <button class="btn btn-default btn-block" onclick="demo.showNotification('top','left')">Top Left</button>
        </div>
        <div class="col-md-3">
            <button class="btn btn-default btn-block" onclick="demo.showNotification('top','center')">Top Center</button>
        </div>
        <div class="col-md-3">
                <button class="btn btn-default btn-block" onclick="demo.showNotification('top','right')">Top Right</button>
       </div>
</div>

Я пытаюсь onload, но у меня это не работает.если у кого-то есть идея получше или что-то или лучше, то это было бы здорово.

Answer 1

(Ответ на комментарий "... но я ищу встраивать это в php if condion" ... На этот раз я не могу писать комментарии, я новичок)

Вы можете добавить атрибут данных ( Use_data_attributes ) для вашего html-элемента, который содержит флаг.

<div class="col-md-3">
       <button id="top_left" class="btn btn-default btn-block" data-condition="<?php echo isset($var) ? 'true' : 'false'; ?>">Top Left</button>
</div>

Вы можете получить доступ к этим данным в вашем js и использовать их в выражениях, например:

var topLeftButton = document.querySelector('#top_left'); //Or build some logic, if you dont want use ids ...

if (topLeftButton.dataset.condition === 'true') {
    //do stuff

    //Furthermore, you can modifiy these datas from your js:
    topLeftButton.dataset.condition = 'false'; //so now, you turned off this flag
}

Answer 2

Вы можете использовать следующее, чтобы получить уведомление о загрузке страницы, используя jquery и Bootstrap

$('#overlay').modal('show');

setTimeout(function() {
    $('#overlay').modal('hide');
}, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="modal fade" id="overlay">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Your heading goes here.. </h4>
      </div>
      <div class="modal-body">
        <p>Your content body goes here..</p>
      </div>
    </div>
  </div>
</div>

Подробнее см. Здесь Ссылка

Также вы можете использовать библиотеку noty.js , которая является плагином jQuery, для выполнения вашей задачи