CODEWITHSUNDEEP
phpjquerytwitter-bootstrapbootstrap-4
Ns789
Ns789

Reputation: 541

How to load notification alert on top right corner without click of button in bootstrap or php?

I have implemented successfully notification alert using bootstrap when user press or click of the button but I am looking a way to load alert in the same way without a click of the button. I want it on the page load.

Below is the code:

  <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>

I try onload but it doesn't work for me. if anyone has a better idea or something or better way then it would be great.

Upvotes: 2

Views: 1316

Answers (2)

Coder
Coder

Reputation: 338

You can use the following to get the notification on page load using jquery and 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>

For further details refer this Link

Also you can use the noty.js library which is a jQuery plugin to accomplish your task

Upvotes: 1

danigore
danigore

Reputation: 416

(Answer to " ...but i am looking for embed this into php if condion" comment ... I cant write comments this time, Im newbie)

You can add a data attribute (Use_data_attributes) to your html element, what contains a flag.

<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>

You can access to this data in your js, and use it in statements, like:

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
}

Upvotes: 2

Related Questions