jquery模式打开链接也是我不想要的

Question

我正在使用来自https://jquerymodal.com/的jquery模态和第4个例子，但是当我使用该代码并点击链接时...模态打开并且链接打开..我只是想打开模态而不是链接，因为其中的内容链接在该模态中打开。那么我该怎么办呢请帮助

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery- 
modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery- 
modal/0.9.1/jquery.modal.min.css" />

<a href="product.php?id=12" rel="modal:open" class="btn-primary btn-xss">Order</a>

Answer 1

看看他们的例子：https://jquerymodal.com/ajax.html

它仅包含以下内容：

<h1>Hello there!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

查看您的product.php并确保它返回非常基本的HTML内容。例如，当您导航到product.php?id=12时，它应该只返回您想要在模式中显示的HTML：

PHP

<?php
// GET Request
$id = $_GET['id'];
// SQL Login and Query code here
// $product = array(name, desc)
$html = "<div class='product-title'>{$product['name']}</div>\r\n";
$html .= "<div class='product-desc'>{$product['desc']}</div>\r\n";
// Close SQL Connection
echo $html;
?>

这有助于确保您拥有所需的HTML输出。然后在HTML页面中，您可以按预期运行代码：

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery- 
modal/0.9.1/jquery.modal.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>

<a href="product.php?id=12" rel="modal:open" class="btn-primary btn-xss">Order</a>

希望有所帮助。

Answer 2

尝试删除元素内部的链接：

<a rel="modal:open" class="btn-primary btn-xss">Order</a>