Question

我的朋友们想问我在哪里显示“警告”消息的问题不会在几秒钟内消失，大致在我的代码错误的地方，

我非常感谢您的帮助。

html代码

<?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);
});

Answer 1

尝试使用自定义提醒框，以便您可以对其进行自定义。

这是一个基本示例

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>

如果需要，您也可以将其连接起来以自动消失。

如果您有兴趣，这是一种更好的方法

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>

我要关闭警报消息

1 个答案: