I want to close an alert message

Question

My friends want to ask where I have a problem displaying an "alert" message does not disappear in a few seconds, roughly where my code is wrong,

I am very grateful for the help.

html code

<?php if ($this->session->flashdata('success')): ?>
    <div class="alert alert-danger">
        <?php echo $this->session->flashdata('success'); ?>
    </div>
<?php endif; ?>

javascript

$(document).ready(function()
{
   setTimeout(function()
        alert('success');
   },
   5000);
});

You can't make an alert box go away - it requires the user to click. See https://stackoverflow.com/questions/463368/javascript-close-alert-box — Jack Bashford, Nov 24 '18 at 01:22
Possible duplicate of [Javascript close alert box](https://stackoverflow.com/questions/463368/javascript-close-alert-box) — Jack Bashford, Nov 24 '18 at 01:23
i alreadv try alert = bootbox.alert('Massage') alert.show(); setTimeout(function(){alert.modal('hide'); }, 4000); not work — Alfin Nur, Nov 24 '18 at 01:30
That's a modal - it's not a native alert. You might want to look at https://stackoverflow.com/questions/16493280/close-bootstrap-modal — Jack Bashford, Nov 24 '18 at 01:45
I call the alert with the controller whether the controller can display modal — Alfin Nur, Nov 24 '18 at 01:58

score 0 · Answer 1 · answered Nov 24 '18 at 02:55

Try using a custom alert box so your able to customize it.

Here's a basic example

alertBox('This is a custom alert box');



function alertBox(message) {
  var alertBox = document.getElementById('alert-box');
  
  alertBox.innerHTML = message;
  alertBox.style.display = 'block';
}

function alertBoxHide() {
  var alertBox = document.getElementById('alert-box');
  
  alertBox.style.display = 'none';
}

.alert-box {
  display: none;
  position: absolute;
  top: 32px;
  left: 40vw;
  width: 20vw;
  height: 70px;
  border: 1px solid gray;
}

<div id="alert-box" class="alert-box"></div>
<button class="button" onclick="alertBoxHide()">Hide Alert Box</button>

You could also hook it up to automatically go away if you want.

This is a fancier way if you interested

var toggleStatus = true;

function toggle(button) {
  if (toggleStatus) {
    alertBoxShow('This is a Heading', 'This is the content of the custom alert box');
    toggleStatus = false;
    button.innerHTML = 'Hide Alert Box';
  } else {
    alertBoxHide()
    toggleStatus = true;
    button.innerHTML = 'Show Alert Box';
  }
}

function quickShow() {
  alertBoxShow('This is timed', 'This will only appear for 3 seconds');
  window.setTimeout(function() {
    alertBoxHide();
  }, 3000)
}

function alertBoxShow(header, content) {
  var alertBox = document.getElementById('alertBox');
  
  alertBox.innerHTML = '<div class="alert-box-header">' + header + '</div><hr><div class="alert-box-content">' + content + '</div>';
  alertBox.style.top = '32px';
}

function alertBoxHide() {
  var alertBox = document.getElementById('alertBox');
  
  alertBox.style.top = '-130px';
}

.alert-box {
  position: absolute;
  top: -130px;
  left: 30vw;
  width: 40vw;
  height: 120px;
  border: 1px solid gray;
  border-radius: 4px;
  font-family: Arial;
  transition: 0.5s ease-in-out;
}

.alert-box-header {
  padding: 16px;
  padding-bottom: 0px;
  font-size: 24px;
  text-align: center;
}

.alert-box-content {
  padding: 16px;
  padding-top: 0px;
  margin-top: 0px;
  font-size: 18px;
}

hr {
  border: 0px;
  width: 90%;
  height: 2px;
  background-color: gray;
}

<div id="alertBox" class="alert-box"></div>
<button onclick="toggle(this)">Show Alert Box</button>
<br><br>
<button onclick="quickShow()">Show Alert Box For 3 Seconds</button>

I want to close an alert message

1 Answers1