0

我正在做一个推特网站。但我无法解决这个问题。当我想单击此按钮时：

推特

我期待这样的结果：

推特形式

它的背景看起来像这样，它会在屏幕上弹出一个表单。我应该用什么来解决这个问题？我对 HTML DOM 还不错，但我无法弄清楚我脑海中的算法。

4

2 回答 2

0

为此，您可以使用 JavaScript 或 jQuery。

示例：

$(".mybutton").click(() => {
   $("body").append(`
    <div class="modals">
      Copy your code here
    </div>
  `)
})
.modals{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 40px 30px;
  background-color: #e2e2e2;
  border-radius: 4px;
}
<button class="mybutton">Open</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

于 2021-08-15T15:24:45.283 回答
0

实现此目的的另一种方法是使用已经存在但仅在单击某个按钮后才会显示的模式框 (div)。

这是一个简单的示例，我还添加了一个叠加层，它将出现在 div 后面。如果在模态框可见时单击覆盖，它将再次消失。

$('#button').click(() => {
    var display = $('#popup').css('display');
    if (display === "none") {
        $('#popup').show();
        $('#overlay').fadeIn();
    }
    else {
        $('#popup').hide();
        $('#overlay').fadeOut();
    }
});

$('#overlay').click(() => {
    $('#popup').hide();
    $('#overlay').fadeOut();
});
* {
    margin: 0;
    padding: 0;
}

#popup {
    position: absolute;
    background-color: #fff;
    padding: 6%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    border-radius: 30px;
    z-index: 10;
    display: none;
}

#overlay { 
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>
    </head>
    <body>
        <div id="overlay"></div>
        <div id="button">Click me</div>
        <div id="popup">Text</div>
    </body>
</html>

于 2021-08-15T16:03:09.000 回答