Вставьте плавающую кнопку в текстовое поле с помощью jQuery

Question

Вставьте плавающую кнопку в текстовое поле с помощью jQuery

0

У меня есть 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));: setFullScreen(cm, !isFullScreen(cm));
Отключить полноэкранный if (isFullScreen(cm)) setFullScreen(cm, false);: if (isFullScreen(cm)) setFullScreen(cm, false);

Я хотел бы добавить кнопку, когда мое текстовое поле находится в полноэкранном режиме, я бы хотел, чтобы эта кнопка находилась внутри текстового поля в верхнем правом углу и была независимой от прокрутки (плавающей)

Есть ли способ сделать это с помощью jquery?

благодаря

Rad 09 нояб. 2013, в 21:39

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Lloyd Banks · Accepted Answer · 2013-11-09T17-22-00.000Z

Вы можете использовать position: fixed; атрибут в CSS. Скажем, это ваша разметка 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"});

И наоборот, когда кнопка нажата

Спасибо, трюк css определенно решил мою проблему