当用户按下或单击按钮时,我已经使用引导程序成功实现了通知警报,但我正在寻找一种无需单击按钮即可以相同方式加载警报的方法。我希望它在页面加载中。
下面是代码:
<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
但它对我不起作用。 如果有人有更好的想法或更好的方法,那就太好了。
(回答" ...但是我正在寻找将其嵌入到PHP中,如果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
}
您可以使用以下内容来获取使用 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">×</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插件。