使用jQuery在textarea上插入浮动按钮

时间:2013-11-09 19:56:31

标签: javascript jquery html css

我有一个textarea,我可以控制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);

我想在我的textarea全屏时添加一个按钮,我希望该按钮位于右上角的textarea内,并且与滚动(浮动)无关

有没有办法用jquery做到这一点?

由于

1 个答案:

答案 0 :(得分:1)

您可以在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时运行以下代码行

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

单击按钮时反之亦然