JQuery简单的对话框

时间:2011-08-14 11:20:27

标签: php jquery

<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

感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

最好只使用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;
}

答案 1 :(得分:0)

  1. 首先,一个显而易见的问题:你是否包含了jQuery?作为jQuery扩展,simpleDialog依赖于jQuery来工作。 只需通过修复就可以显示对话框,但是对话框本身就会被打破,这就把我们带到了...

  2. 辅助,正如您在示例中所看到的,simpleDialog适用于链接。此时(v0.1.1)在同一链路上两次调用它两次似乎是禁止的。因此,制作两个链接并使您的函数在每个链接上只调用一次simpleDialog。

  3. 最后,如果您仍然遇到问题,由于这是客户端问题,因此此处仅客户端代码很重要。确保你的php正在生成正确的HTML。并检查css和js是否实际加载(在正确的位置等)。下面是一个完整的输出html,适合我:


  4. <!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>