Question

如您所见，我有一个按钮和一个链接。

点击链接时，链接会显示弹出窗口。如何使用Jquery在按钮中执行此操作？

我想删除该链接。我希望按钮的行为像超链接

如何使用按钮替换链接？

我应该在哪里声明按钮中的链接？

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('.popup').click(function(event) {
            event.preventDefault();
            window.open(
                $(this).attr("href"),
                "popupWindow", 
                "width=600,height=600,scrollbars=yes"
            );
        });
    });
</script>
</head>
<body>
    <input type="submit" value="google" id="btnSubmit" name="btnSubmit" style="width:54">
    <a href="http://google.com" class="popup">google</a>
</body>
</html>

Answer 1

您可以将链接放在data属性中。然后jQuery可以使用data()方法来获取它

$("input.popup").click(function(e) {
  e.preventDefault();
  var target = $(this).data("href");
  alert("Opening "+target);
  window.open(target, "popupWindow", "width=600,height=600,scrollbars=yes"
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="popup" value="Google" data-href="http://google.com" style="width: 54;">

弹出窗口在代码片段中不起作用，因为SO已将其沙箱化，因此我添加了警报。

jQuery链接弹出窗口

1 个答案: