Question

<link href="simpledialog.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="simpledialog.js"></script>



<script type="text/javascript">



$(document).ready(function () {
$('.simpledialog').simpleDialog();
});
$(document).ready(function () {
$('.simpledialog').simpleDialog({
opacity: 0.3,
duration: 500,
title: 'Simple Dialog',
open: function (event) {
  console.log('open!');
},
close: function (event, target) {
  console.log('close!');
}
});
});

$strLink = "<a href='viewTicket.php?id={$row['id']}' class='simpledialog'>$strName</a>";



<a href="#" rel="dialog_content" class="simpledialog">show dialog!</a>

<!-- content -->
<div id="dialog_content" style="display:none;">
<h3>DEMO</h3>
<p>This is a demonstration of jQuery SimpleDialog.</p>
<a href="#" class="close">close</a>
</div>

echo "<td>" . $strLink . "</td>";

当我点击链接时，它没有触发jquery

感谢您的帮助！

Answer 1

最好只使用position:absolute创建一个div，只需显示它就可以了。

function showDialog() { $('#box').fadeIn(250); $('#box').fadeTo(0.5); }
function hideDialog() { $('#box').fadeOut(250); }

您可以这样打电话：打开

如果你需要它还有CSS：

#box {
   position: absolute;
   top: 100;
   left: 100;
   width: 100px;
   height: 100px;
   display: none;
}

Answer 2

首先，一个显而易见的问题：你是否包含了jQuery？作为jQuery扩展，simpleDialog依赖于jQuery来工作。只需通过修复就可以显示对话框，但是对话框本身就会被打破，这就把我们带到了...
辅助，正如您在示例中所看到的，simpleDialog适用于链接。此时（v0.1.1）在同一链路上两次调用它两次似乎是禁止的。因此，制作两个链接并使您的函数在每个链接上只调用一次simpleDialog。
最后，如果您仍然遇到问题，由于这是客户端问题，因此此处仅客户端代码很重要。确保你的php正在生成正确的HTML。并检查css和js是否实际加载（在正确的位置等）。下面是一个完整的输出html，适合我：

<!DOCTYPE html><html><head>
  <link href="css/jquery.simpledialog.css" type="text/css" rel="stylesheet" />
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'> </script>
  <script src="js/jquery.simpledialog.js" ></script>
</head><body>
<script type="text/javascript">
  $(document).ready(function () {
    $('.simpledialog1').simpleDialog(); // Default usage
  });
  $(document).ready(function () { // Usage with more parameters
    $('.simpledialog2').simpleDialog({
      opacity: 0.7, // Modified parameter to make it different from default
      duration: 1000,
      title: 'Simple Dialog',
      open: function (event) {
        console.log('open!');
      },
      close: function (event, target) {
        console.log('close!');
      }
    });
  });
</script>

<a href="#" rel="dialog_content" class="simpledialog1">show default dialog!</a>
<a href="#" rel="dialog_content" class="simpledialog2">show slower dialog!</a>

<!-- content -->
<div id="dialog_content" style="display:none;">
  <h3>DEMO</h3>
  <p>This is a demonstration of jQuery SimpleDialog.</p>
  <a href="#" class="close">close</a>
</div>

</body></html>

JQuery简单的对话框

2 个答案: