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中的评论” ...我这次无法发表评论，我是新手）

您可以将数据属性（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>

有关更多详细信息，请参阅此Link

您还可以使用noty.js库，它是一个jQuery插件来完成您的任务

如何在不单击bootstrap或php中的按钮的情况下加载右上角的通知警报？

2 个答案: