使用 jQuery 在文本区域插入一个浮动按钮

Insert a floating button on a textarea using jQuery

本文关键字：一个 按钮 jQuery 文本 区域 插入 使用      更新时间：2023-09-26

我有一个文本区域，我可以控制jquery函数变成全屏函数。我想添加一个按钮来关闭全屏

我管理全屏的函数是：

function setFullScreen(cm, full) {
         var wrap = cm.getWrapperElement();
         if (full) {
           wrap.className += " CodeMirror-fullscreen";
           wrap.style.height = winHeight() + "px";
           document.documentElement.style.overflow = "hidden";
         } else {
           wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
           wrap.style.height = "";
           document.documentElement.style.overflow = "";
         };
        cm.refresh();
       }

我叫它的方式是这样的：

打开全屏：setFullScreen(cm, !isFullScreen(cm));
关闭全屏：if (isFullScreen(cm)) setFullScreen(cm, false);

我想在我的文本区域全屏时添加一个按钮，我希望该按钮位于右上角的文本区域内并且独立于滚动（浮动）

有没有办法使用 jquery 来做到这一点？

谢谢

您可以在 CSS 中使用 position: fixed; 属性。 假设这是您的 HTML 按钮标记

<a href = "#" id = "textarea_close_button">
     <img src = "/img/close_button.png">
</a>

您的 CSS 将如下所示：

#textarea_close_button{
     position: fixed;
     display: none; //it won't be visible until your textarea becomes fullscreen
     top: 5px;
     right: 5px;
     height: 5px;
     width: 5px;
}

然后在全屏显示文本区域时运行以下代码行

$("#textarea_close_button").css({"display": "block"});

反之亦然，当单击按钮时

相关文章：