Question

我正在尝试编写一个简单的脚本，当您单击文本时，它会弹出一个带有YouTube视频的弹出窗口。我让它在隐藏页面加载的地方工作，然后当我点击它显示的文本时。我的问题是，当我点击X时，我似乎无法关闭窗口。我怀疑是因为div是隐藏的，所以它无法注册onclick，但如果是这样的话，我该怎么办？注册吗？

这是我的代码：

<html>
<head>
    <style>
        .pop-up{
            display: none;
            width: 460px;
            height: 385px;
            background-color: #FFF;
            position:absolute;
            top: 300px;
            left: 300px;
        }
        .inner-pop-up{
            display: block;
            width: 420px;
            height: 345px;
            background-color: #333;
            position:relative;
            left: 20px;
            top: 20px;
        }
        p{
            margin: 0;
            padding-right: 5px;
            padding-top: 3px;
            float: right;
            font-size: 20px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("div").click(function(){
        $('.pop-up').css("display", "block");
      });
      $("p").click(function(){
        $('.pop-up').css("display", "none");
      });
    });
    </script>
</head>
<body style="background-color: black;">
    <div style="color: white;">
        Click Me
    </div>
    <div class="pop-up">
        <p>X</p>
        <div class="inner-pop-up">
            <embed
                width="420" height="345"
                src="http://www.youtube.com/v/XGSy3_Czz8k"
                type="application/x-shockwave-flash">
            </embed>
        </div>
    <div>
</bodY>

此外，我想知道是否可以将白色框架外的所有内容变暗，因为调暗它以使白色框架成为焦点，然后当我单击框架外的任何位置时，此框架将关闭。

Answer 1

@VDesign是正确的，事件中div的定位不允许稍后点击P.

通过设置一个类并正确定位它，P就可以作为一个关闭。

$(document).ready(function(){
  $("div.clickme").click(function(){
    $('.pop-up').css("display", "block");
  });
  $("p").click(function(){
    $('.pop-up').css("display", "none");
  });
});

http://jsfiddle.net/6vx9t/

Answer 2

这里是你的小提琴

http://jsfiddle.net/pragneshok/Uj9c2/

请包含jquery migrate文件也可以使用live函数，你可以查看小提琴

 $(document).ready(function(){
      $("div").click(function(){
        $('.pop-up').css("display", "block");
      });
      $("#close").live('click',function(){
        $('.pop-up').css("display", "none");
      });
    });

Answer 3

它正在运作。因为你没有在javascript中编写弹出功能。删除它。

Demo

<div class="h" style="color: white;" >
        Click Me
    </div>
    <div class="pop-up">
        <p>X</p>
        <div class="inner-pop-up">
            <embed
                width="420" height="345"
                src="http://www.youtube.com/v/XGSy3_Czz8k"
                type="application/x-shockwave-flash">
            </embed>
        </div>
    <div>

 $(document).ready(function(){
      $(".h").click(function(){
        $('.pop-up').css("display", "block");
      });
      $("p").on('click',function(){
        $('.pop-up').css("display", "none");
      });
    });

一个onclick没有开火

3 个答案: