Scroll popup css что это

Simple React Popup Code with Scrollbar

If you need to display long text for the user in the pop-up section, you can use this code. This code shows a button in the middle and top of the page. This button has a black border. Clicking on this button opens a pop-up that contains long text and therefore has a pop-up scroll. This pop-up can be suitable for the rules section.

Scrolling React Popup

Javascript Popup Code

Simple Popup Code

CSS Scrollable Popup

.popup < position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; display: flex; align-items: center; justify-content: center; >.popup.hidden < display: none; >.popup .black-section < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; >.popup .content-section-wrapper < position: relative; background: #fff; width: 500px; max-height: 100%; padding: 25px; z-index: 2; >.popup .content-section-wrapper .close-button < position: absolute; top: 0; right: -50px; width: 50px; height: 50px; background: #302c2c; font-weight: 600; color: #fff; font-size: 22px; padding: 3px 0 0 0; text-decoration: none; >.popup .content-section < min-height: 100px; max-height: 70vh; overflow-y: scroll; >.popup .content-section h2 < margin: 0; padding: 5px 0 15px 0; >.popup .content-section p < font-size: 17px; margin: 0; >.aligner < display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; >@media screen and (max-width: 700px) < .popup .content-section-wrapper .close-button < right: 0; >>

class Popup extends React.Component < constructor(props) < super(props); this.close = this.close.bind(this); >close() < this.props.onClose(); >render() < const < head, body >= this.props; return /*#__PURE__*/( React.createElement("div", < className: "popup" >, /*#__PURE__*/ React.createElement("div", < className: "black-section", onClick: this.close >), /*#__PURE__*/ React.createElement("div", < className: "content-section-wrapper" >, /*#__PURE__*/ React.createElement("a", < href: "javascript:;", className: "close-button aligner adaptLink", onClick: this.close >, "X"), /*#__PURE__*/ React.createElement("div", < className: "content-section" >, /*#__PURE__*/ React.createElement("div", < className: "head-block" >, head), /*#__PURE__*/ React.createElement("div", < className: "body-block" >, /*#__PURE__*/ React.createElement("div", < className: "body-block-inner" >, body)))))); >> class List extends React.Component < constructor(props) < super(props); this.state = < visiblePopup: true >; this.openPopup = this.openPopup.bind(this); this.closePopup = this.closePopup.bind(this); > openPopup() < this.setState(< visiblePopup: true >); > closePopup() < this.setState(< visiblePopup: false >); > render() < const < visiblePopup >= this.state; let popupTitle = /*#__PURE__*/React.createElement("h2", null, "React Popup"); let popupBody = /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos repudiandae fugiat voluptatum maxime dolorem accusamus eius placeat expedita accusantium obcaecati. Consequatur earum asperiores minus necessitatibus atque odit ut tenetur at cumque placeat magni quis reprehenderit numquam mollitia corrupti temporibus vel recusandae commodi autem fugiat animi ea, accusamus dignissimos iure! Culpa fuga quae unde repudiandae consequuntur quaerat officia doloremque facere id eaque, obcaecati enim animi consequatur distinctio architecto nulla praesentium. Delectus doloribus id quasi officia cupiditate nobis a quibusdam, molestiae maiores reprehenderit odio optio, provident, qui eligendi fugit possimus autem ab enim repellat quidem eum. Vel, voluptas enim hic nisi nobis molestias consequuntur rem, aspernatur dolorum architecto incidunt maxime nam officia aperiam delectus inventore eveniet. Placeat distinctio vero ea ex alias sit voluptas possimus inventore eligendi dolorum cupiditate fugiat, fuga quis quisquam, voluptatem dignissimos debitis tempore officia similique deserunt omnis deleniti! Non est doloremque, voluptatum iure quasi sunt quae! Molestias sapiente vero temporibus accusantium nihil omnis numquam voluptatibus, pariatur, iure accusamus fuga adipisci commodi explicabo ipsum iusto repellendus beatae libero a architecto eius veniam voluptatum perferendis aliquid tempore. Laboriosam a maiores vero dolor quod delectus expedita saepe eius quibusdam pariatur! Eius, eveniet. Ad numquam ullam necessitatibus harum, vitae tenetur repellendus facere quisquam quas, laboriosam eaque ea quasi, ducimus nulla et odio quod quos voluptas neque quaerat sed? Hic dicta enim itaque facere. Corporis aliquid laudantium inventore animi recusandae blanditiis aliquam quas obcaecati aspernatur ea velit excepturi, reiciendis reprehenderit dignissimos. Debitis vero minus, iusto hic itaque aliquam tempora nesciunt sapiente harum. Tempora temporibus accusantium quisquam a dolorem sit sed iste, doloribus quo ullam alias non nesciunt ab aspernatur voluptas beatae facere sequi blanditiis ipsa eaque repudiandae praesentium nisi! Tenetur incidunt ratione modi accusamus exercitationem dolores aut doloremque temporibus repudiandae odit aliquam aperiam, repellat saepe minus magni rem tempora. Maxime animi nesciunt sit!"); return /*#__PURE__*/( React.createElement("div", null, /*#__PURE__*/ React.createElement("p", < style: < textAlign: 'center' >>, /*#__PURE__*/ React.createElement("a", < href: "javascript:;", onClick: this.openPopup, style: < textDecoration: 'none', color: '#000', border: '1px solid', borderRadius: '5px', padding: '8px' >>, "Open Pop-Up")), visiblePopup ? /*#__PURE__*/React.createElement(Popup, < head: popupTitle, body: popupBody, onClose: this.closePopup >) : "")); >> ReactDOM.render( /*#__PURE__*/ React.createElement(List, null), document.getElementById("app"));

         
Free Frontend
   

Источник

Прокрутка модального окна | CSS

Если содержимого в модальном окне много, то прокручивать следует его, а не scrollbar . Но полосу прокрутки перекрыть нельзя: образец .

Зато можно накрыть полосу прокрутки . Вот вариант кода чтобы и имели высоту, равную высоте окна браузера:

Ларчик Случается нередко нам И труд и мудрость видеть там, Где стоит только догадаться За дело просто взяться. К кому-то принесли от мастера Ларец. Отделкой, чистотой Ларец в глаза кидался; Ну, всякий Ларчиком прекрасным любовался. Вот входит в комнату механики мудрец. Взглянув на Ларчик, он сказал: «Ларец с секретом, Так; он и без замка; А я берусь открыть; да, да, уверен в этом; Не смейтесь так исподтишка! Я отыщу секрет и Ларчик вам открою: В механике и я чего-нибудь да стою». Вот за Ларец принялся он: Вертит его со всех сторон И голову свою ломает; То гвоздик, то другой, то скобку пожимает. Тут, глядя на него, иной Качает головой; Те шепчутся, а те смеются меж собой. В ушах лишь только отдается: «Не тут, не так, не там!» Механик пуще рвется. Потел, потел; но наконец устал, От Ларчика отстал И, как открыть его, никак не догадался; А Ларчик просто открывался. Иван Андреевич Крылов закрыть

2 комментария:

Alexander Suhushin Стрелками скроллируется главное окно NMitra Верное замечание! Нужно дать фокус всплывающему окну. На CSS можно чтобы кнопка становилась модальным окном. На JS можно отлавливать клик по кнопке и передавать фокус модальному окну.

Источник

Модальное окно с полосой прокрутки Пример добавления полосы прокрутки в модальное окно разработанное на CSS3 и jQuery

Добавить полосу прокрутки в модальное окно очень просто. Посмотрите пример того что у нас получилось в итоге.

Все решают пару строк: overflow: auto; height: 300px;

Медведь по лесу шлялся озабоченный,
Искал, зверюга, лёгкую еду.
Он от природы был ленивый очень
И не приучен вовсе был к труду.

Не сеял, не пахал и не охотился,
И даже не имел своей семьи.
И о зиме, понятно, не заботился
В компании зачуханной свиньи.

Свинья была глупа необычайно.
И то сказать — что можно взять с свиньи.
Вот так они бродили. И случайно
На рой пчелиный где-то набрели.

А пчёлы мёд по каплям собирали
И прятали в обычное дупло.
Медведь же со свиньёй давно не жрали.
А тут — медок. Вот гадам повезло!

Тут нужно рассказать, что косолапый
Имел с рожденья крохотный изъян.
Давно бы съел свинью, но. мама с папой
Вели свой род от древних мусульман.

Поэтому с ленивым косолапым
В лесу никто водится не хотел.
Сожрёт тебя, скотина,тихой сапой.
Ну, а свинью он есть бы не посмел.

Короче говоря, они дружили
Поскольку не с кем было им дружить.
А тут дупло! И спазмы сухожилий,
И мысль: «До завтра ж можно не дожить!»

Дупло — оно, как водится, не низко,
А пчёлы жалят — будь ты хоть медведь.
Коль к меду подберёшься очень близко,
То искусают в хлам, едрёна медь!

В пустой башке не много размышлений,
Но голод — лечит, мягко говоря.
Ведь с голодухи — всяк великий гений.
Будь ты медведь иль глупая свинья.

Голодный мозг нарисовал картину
И даже сотворил в уме чертёж.
И вот уже две глупые скотины
Зашевелилися, едрёна вошь.

Надули шар воздушный, цветом — синий.
Хотя откуда шарики в лесу?
Ружьё, под дуб с собою притащили
(Повесил кто-то пьяненький на сук).

Лететь решил медведь. Не в весе дело,
А в том, что на фига свинье летать?
Её удел под дубом престарелым
Вчерашний жёлудь в сумерках жевать.

Так пусть берёт ружьё и, залпом, сразу
Палит , зараза, изо всех стволов.
Но только в шар! И только по приказу!
Без возражений и без лишних слов!

И вот вознёсся шар с медведем в небо..
Атака пчёл. Сплошные волдыри.
Огузок — решетом. Повтор набега.
Истошный вопль: «Стреляй, свинья! Пали!»

И — залп! И — крик! И шумное паденье!
Дымок из дула свинского ружья.
Семь дыр в боку. Ведь с самого рожденья
Косой была проклятая свинья!

Мораль: Хоть лень и двигатель прогресса,
Но важно выбирать себе друзей
С мозгами. Родом лучше не из леса.
И только не косых. И не свиней.

Источник