代码之家 › 专栏 › 技术社区 › dicle

再次单击按钮后如何显示警报

alertdialog alert html javascript

-2

dicle · 技术社区 · 7 年前

我有一个由按钮触发的警报,该警报在3秒钟后消失。

如何在每次单击按钮时显示该警报?目前它只工作一次。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ex1">
  <button id="alert-trigger" data-dismiss="alert" class="btnClick">
    Trigger Alert
  </button>

  <div id="example" class="alert" role="alert"></div>

  <script type="text/template" id="alert-template">
    <p>
      <span lang="da">Merhaba</span>,
      hello,
      <span lang="ja">Hallo</span>
    </p>
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      window.setTimeout(function() {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function() {
          $(this).remove();
        });
      }, 3000);
    });
  </script>
</div>

0 回复 | 直到 7 年前

AndrewL64 7 年前

纯javaScript ,只需设置 #example #alert-trigger 单击按钮并使用 setTimeout()

jQuery ,躲起来元素,然后只需使用 fadeIn() 方法使其在单击时淡入,并使用 setTimeout() 方法以及 fadeOut() 方法在设置的秒数后再次淡出元素。

检查并运行以下命令 代码片段 对于我上面描述的实际例子:

纯JavaScript方法:

/* JavaScript */

const btn = document.getElementById("alert-trigger");
const box = document.getElementById("example");

btn.addEventListener("click", function(){
	box.style.opacity = 1;
  setTimeout(function(){box.style.opacity = 0}, 1000);
});

/* CSS */

body {text-align: center;}#alert-trigger{background-color: green; padding: 5px; color: #FFF;}

#example {background-color: grey;padding: 10px;margin: 10px 0px;
  opacity:0; /* initial opacity value set to 0 */
  transition: all 1s; /* will fade the element instead of hiding/showing the element instantly */
}

<!-- HTML -->

<button id="alert-trigger">Trigger Alert</button>

<div id="example" >
  <h2>Box Content Here:</h2>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quia dolore cumque aliquid eaque nisi, eos praesentium delectus tempore quidem? Iure tenetur cupiditate, laborum, saepe aut alias voluptatem impedit molestias.</p>
</div>

jQuery方法:

/* JavaScript */

$("#alert-trigger").on("click", function(){
	$("#example").fadeIn(); // fade in the example div
  
  setTimeout(function(){
  	$("#example").fadeOut(); // fade out the example div
  }, 1000);
})

/* CSS */

#example {display:none;} /* initially hide it by default */

<!-- HTML -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="alert-trigger">Trigger Alert</button>

<div id="example" >
  <h2>Box Content Here:</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quia dolore cumque aliquid eaque nisi, eos praesentium delectus tempore quidem? Iure tenetur cupiditate, laborum, saepe aut alias voluptatem impedit molestias.</p>
</div>

Seba99 7 年前

目前,您没有将任何单击事件绑定到该事件 <button> 我想你在找这样的东西:

 $(document).ready(function() {
    //First hide the alert :
      $("#example").hide();
      
    // then bind the click :
    $("#alert-trigger").on("click", function () {
      
      $("#example").fadeIn(); // Shows the alert
      
      window.setTimeout(function() {
        $("#example").fadeOut(); // hides it again
      }, 3000);
      
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ex1">
  <button id="alert-trigger" data-dismiss="alert" class="btnClick">
    Trigger Alert
  </button>

  <div id="example" class="alert" role="alert">I'm an ALERT !</div>
  
</div>