Javascript 如何创建在屏幕上打开div的href？

我有一个带有链接的页面，我希望每次用户点击它时，它都会打开一个包含内容的div，点击任何地方都会关闭它

如何使用CSS来实现这一点？ 或者我应该使用Javascript来实现这一点？怎么做？
是否更推荐使用JS执行此操作？ 什么在网页上加载得更快

首先是小提琴：

这是一些文本。
#突袭{
/*显示：无*/
边框：1px纯黑；
保证金：0自动；
宽度：200px；
高度：100px；
}

这通常通过JavaScript完成。也许jQuery是您可以使用的东西

通常，您要做的是：

• 用内容准备div，并通过CSS使其不可见（display:none）——或者改用CSS类
• 将单击处理程序附加到href，并在处理程序内的该div上执行（display:block）

你的问题听起来很有理论性。。您还需要一个代码示例吗

---

编辑：嗯，好的。。好像我误解了这个问题。我立刻想到的是对话，而不是对话。

我希望我正确理解了你的问题

您可以使用jQuery来实现这一点。看这个例子

html

---

有很多误解

我认为这里的人让事情变得比实际情况更复杂。 这是一把小提琴：

这是我使用的jQuery代码：

            $(".link").click(function(e){
                e.preventDefault(); // prevent default link behaviour, or the browser will try to redirect you to an other page (that's what links do).
                $("#popush").show(function(){ //this function will only be created when the #popush shows, it's a callback.        
                    $(document).one("click",function(){  //I used $.one() I let you read the doc about this ;)
                        $('#popush').hide();
                    });
                });
            });

---

你真正想要的是类似于bootstrap accoridion的东西：）下次，请向我们展示你的尝试。给我们看看你的代码等。首先，这是一个可怕的问题，非常不清楚。。。但是您可以使用JavaScript在指定的div内加载页面。这会在页面加载时执行，这意味着页面内容不会更改，但div内的内容会更改。它使用onclick函数…-如果我理解你的意思，那么请注意这个链接。这个问题很不清楚。OP想要一个手风琴，一个对话吗？@Marcel是Hier，这是非常不清楚的，我不是百分之百确定，这就是为什么我只是猜测我的理解，并给了他这个选项…这看起来不错，我会在一分钟内尝试…标记为正确的，如果你对答案感到满意。谢谢。我试过这个，它会显示出来，我不清楚你想做什么？当点击链接时-它会在页面中心显示一个div（高于一切）-当点击任何div关闭的地方。我更喜欢使用JS而不是jquery，但也许我会在最后使用jquery。我的问题是理论上调整页面加载时间。一般来说，是的，我想举个例子……：）@哈图尔：嗯。。我可能是瞎子，但在JSFIDLE中看不到jQueryUI库。总之，他们在我发布的页面上找到了代码示例。只需点击“查看源代码”链接，您就得到了您的示例。又好又干净；）如果您有任何具体问题，请随时询问。然而，我没有得到业绩的数字。只要你不在页面上弹出十几个对话框，我就不会那么麻烦了。另外，我不认为你只能通过CSS来实现这一点，所以你可以不考虑这一部分。

<button class="btn1">Hide</button>
<button class="btn2">Show</button>

<div id="myDiv" ><p>This is a paragraph.</p></div>

$(document).ready(function(){
  $(".btn1").click(function(){
  $("#myDiv").hide();
  });
  $(".btn2").click(function(){
  $("#myDiv").show();
  });
});

            $(".link").click(function(e){
                e.preventDefault(); // prevent default link behaviour, or the browser will try to redirect you to an other page (that's what links do).
                $("#popush").show(function(){ //this function will only be created when the #popush shows, it's a callback.        
                    $(document).one("click",function(){  //I used $.one() I let you read the doc about this ;)
                        $('#popush').hide();
                    });
                });
            });