如何在链接被点击后显示警示框

Question

如何在链接被点击后显示警示框

5

你好，这是我想要做的事情。我希望在用户点击链接后显示警告框。我的链接指向另一个php页面，但它将再次返回到链接所在的页面。我该怎么做？有人能给我一些实现的想法吗？

这是我尝试过但不起作用的方法。

<?php

function fsa() {
  echo '<div class="alert alert-success alert-dismissable" id="success-alert">';
  echo '<strong>Successfully posted!</strong>';
  echo '</div>';
}


<a class='btn btn-info left-margin' href="dbf-import.php" onclick="fsa()">Import Database</a>

- nethken

3

你是在尝试从JavaScript运行PHP函数吗？！ - Iceman

onclick事件是JavaScript中的吗？抱歉，我真的是个新手。我的天啊哈哈。 - nethken

PHP是在服务器端渲染的，而JS则在客户端渲染。那么你的意图是什么？你只是想在点击时弹出警告框吗？ - Iceman

即使使用JavaScript完成，此“警告”将在加载下一页时显示一小部分时间。您用这个警告表示了什么“成功”？实际上，当发生这种情况时，没有真正成功发生任何事情。也许dbf-import.php页面应该在它实际成功执行操作后显示警告？ - David

@nethken，我不知道你的意图是什么，但根据你上面的评论，我认为你想要在单击时显示一个Bootstrap警报。请查看我的工作代码片段答案。就是这样吗？ - Iceman

5个回答

2

你可以通过Bootstrap模态框实现，而不是使用警告框。你可以根据自己的需要进行设计。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
click on this link : 
  <!-- Trigger the modal with a button -->
  <span data-toggle="modal" data-target="#myModal">www.google.com</span>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Alert Box. Click 'OK' to go to www.google.com</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" onClick="document.location.href='www.google.com'">Go</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

- piku

2

PHP 用于生成 HTML 和 JS。你可以在一个 PHP 文件中同时使用两者，但是需要区分 PHP 和 JS。你调用的函数 fsa() 是一个 JS 函数，因为它将在客户端（即页面加载后，在客户端机器上）运行。HTML 标签中的 onclick 参数需要挂接一个 JS 函数。这样，当你单击标签时，fsa() 将被触发，框将会出现在页面上。

// this is JS, you need <script> tags !!!
<script>
function fsa() {
  // define a new variable
  var box = '';
  // add the HTML inside the JS variable
  box += '<div class="alert alert-success alert-dismissable" id="success-alert">';
  box += '<strong>Successfully posted!</strong>';
  box += '</div>';

  // append the HTML contained inside box to the body
  document.querySelector('body').innerHTML += box;
}
</script>

<a class='btn btn-info left-margin' onclick="fsa()">Import Database</a>

如果您希望在不重新加载客户端页面的情况下保存数据，您可能需要使用 AJAX。

- Ivan

谢谢您提供另一种方法。感谢您的努力 :) - nethken

1

试试这个

<script type="text/javascript">
function Alert() {
var answer = confirm ("Successfully posted!Please click on OK to continue.")
if (answer)
window.location="http://www.yoursite.com";
}
</script>

<a href="javascript:Alert();">click me</a>

- jophab

感谢您提供另一种方法。非常感谢您的努力 :) - nethken

1

首先，像 @Iceman 所说的那样：你正在尝试在 php 中运行一个 javascript 函数，所以首先删除所有这些。如果你只想让用户在点击链接时获得一个警告框，你可以简单地添加。

<script> function fsa(){
    alert("Your alert message");
}
</script>

此外，如果您不希望该人离开此页面，请将href='#'放入链接中，这样就可以解决问题了。

- RPaul

感谢您提供另一种方法。非常感谢您的努力 :) - nethken

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Iceman · Accepted Answer

这是一个示例，展示了在点击按钮时如何显示可关闭的警告框。

$(document).ready(function() {
  $('.activater').click(function() {
    $('.alert').show()
  })
});

.alert {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <h2>Dismissal Alert Messages</h2>
    <button class="activater">Send Message</button>
    <a class="activater">SHOW MESSAGE</a>
    <div class="alert alert-success alert-dismissable">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      Success! message sent successfully.
    </div>

  </div>
</body>