Question

今天我尝试在javaScript中创建最简单的关闭按钮。遗憾的是，它不起作用。这就是它的样子：

<div id="popup_bg">
<div id="popup_window">
<span id="popup_close">
</span>
</div>
</div>

和js代码是：

<script type=”text/javascript”>
        $("#popup_close").click(function() {
        $("#popup_bg").fadeOut();
        event.stopPropagation();
        });
</script>

我也想让它适用于任何这些“弹出窗口”，所以我可能会把它改成像$（this）.parent（）。parent（）。fadeOut（）; - 有可能这样做吗？

谢谢你的帮助！：）

@EDIT

由于您的解决方案都不起作用，我将按字面意思放置我的代码：D也许您会发现一些错误导致错误：

<?php if(isset(errors['user'])) : ?>    
<script type="text/javascript">
    $(function()
    {
        $("#popup_close").on('click', function() {
        $("#popup_background").fadeOut();
        //event.stopPropagation();
        });
    });
</script>
<div id="popup_background" >
    <div class="popup_window">
        <span class="title">
        error
        </span>
        <span class="message"><?php echo errors['user']; ?>
        </span>
        <span id="popup_close" class="button">OK</span>
    </div>
</div>
<?php endif; ?>

我希望这有助于您发现任何错误。它显示正确，我点击我的“OK”范围，没有任何反应：p我讨厌js：D

Answer 1

ID必须是唯一的，您应该使用类：

<div class="popup_bg">
   <div class="popup_window">
      <span class="popup_close"></span>
   </div>
</div>

然后，为了选择被点击元素的目标父元素，您可以使用closest方法：

$(function() { 
    $(".popup_close").click(function(event) {
       $(this).closest(".popup_bg").fadeOut();
       // event.stopPropagation();
    });
});

请注意，在代码event中undefined，您应该将事件对象传递给处理程序。

Answer 2

添加document.ready和/或使用.on功能

<script type=”text/javascript”>
    $(function(){
        $("#popup_close").on('click', function() {
            $("#popup_bg").fadeOut();
            event.stopPropagation();
        });
    });
</script>

此外，ID可能不会在您的文档中重复，使用其他选择器，如类

Answer 3

我看到了你的代码，代码的jquery部分正在运行.. 点击这里：Jsfiddle - ＆gt; http://jsfiddle.net/Zahinize/7YD4D/13/

您应该重写条件 If 语句，

 <? ini_set('error_reporting', E_ALL); ?>

 <script type="text/javascript">
  $(function()
  {
    $("#popup_close").on('click', function() {
    $("#popup_background").fadeOut();
    //event.stopPropagation();
    });
   });
  </script>

 <div id="popup_background" >
  <div class="popup_window">
    <span class="title">
    error
    </span>
    <span class="message">

    <?php 
     if(isset(errors['user'])){      
      echo errors['user']; 
      }
    ?>
     </span>
    <span id="popup_close" class="button">OK</span>
  </div>
</div>

在顶部设置error_reporting ..

在此处查看更多内容：http://php.net/manual/en/function.error-reporting.php

也许这会有所帮助，但坦率地说我没有看到这样的错误处理：错误['user'] 在任何地方..你应该看到错误处理以编写更好的代码;）

Answer 4

如果有多个弹出窗口更好地使用class而不是id。

示例

$(function() { $(".popup_close").on('click',(function() { $(this).parents("div.popup_bg").fadeOut(); }); });

html

<div class = "popup_bg"> <div class = "popup_window"> <span class = "popup_close"></span> </div> </div>

Answer 5

您需要在您的范围内设置一些内容或设置身高。然后你就可以点击它就可以了。避免使用parent().parent()的技巧如果你改变你的div结构可能会破坏。正如其他人所说的那样，如果你打算重用代码（阅读CSS教程），请使用jquery文档（阅读教程）并使用类而不是id ...

Javascript“关闭按钮”无法正常工作

5 个答案: