модальный всплывающий как Google -- javascript поле с участием jquery поле с участием ajax пол Связанный проблема

modal pop up like google


5
vote

проблема

русский

Как сделать модальное всплывающее окно, как Gmail (когда мы пытаемся загрузить EXE, который генерирует крышки прокрутки страницы)

Английский оригинал

How to make modal popup like gmail (when we try to upload exe the pop up that generates covers scrollbar of the page)

</div
        

Список ответов

1
 
vote
vote
Лучший ответ
 

Узнайте следующие модальные диалоговые плагины для jQuery:

    .
  • jqmodal
  • Толщина
  • Blockui
  • диалог jQuery ui
  • Facebox
 

Check out the following modal dialog plugins for jQuery:

  • jqModal
  • ThickBox
  • BlockUI
  • jQuery UI Dialog
  • Facebox
</div
 
 
7
 
vote

gmail работает на <код> iframe и наложение <код> div не внутри этого iframe, поэтому он остается на вершине o Iframe, следовательно, на вершине прокрутки.

код из gmail

 <код> html, body {     height:100%;     margin:0;     overflow:hidden; /* no scrollbars (only in the iframe) */     width:100%; }  .cO { /* this is the iframe */     height:100%;     width:100%; }  .Kj-JD {     background-color:#C3D9FF;     border:1px solid #4E5766;     color:#000000;     outline:0 none;     padding:5px;     position:absolute;     top:0;     width:450px;     z-index:501; /* div stays on top */ }  .Kj-JD-Jh { /* the shadow */     background-color:#808080;     left:0;     position:absolute;     top:0;     z-index:500; }   

Образец HTML

 <код> <body>     <iframe class="cO">...</iframe> <!-- the scroll works on the iframe, not the body -->     <div class="Kj-JD"></div> <!-- outside the iframe -->     <div class="Kj-JD-Jh" style="opacity: 0.5; width: 1440px; height: 361px;"></div> <!-- black background --> </body>   

Чтобы показать div на вершине Я рекомендую jqmodal , это делает всю тяжелую работу для вас.

 

GMail runs on a iframe and the overlay div is not inside this iframe, so it stays on top o the iframe consequently on top of the scrollbar.

Code from GMail

html, body {     height:100%;     margin:0;     overflow:hidden; /* no scrollbars (only in the iframe) */     width:100%; }  .cO { /* this is the iframe */     height:100%;     width:100%; }  .Kj-JD {     background-color:#C3D9FF;     border:1px solid #4E5766;     color:#000000;     outline:0 none;     padding:5px;     position:absolute;     top:0;     width:450px;     z-index:501; /* div stays on top */ }  .Kj-JD-Jh { /* the shadow */     background-color:#808080;     left:0;     position:absolute;     top:0;     z-index:500; } 

Sample HTML

<body>     <iframe class="cO">...</iframe> <!-- the scroll works on the iframe, not the body -->     <div class="Kj-JD"></div> <!-- outside the iframe -->     <div class="Kj-JD-Jh" style="opacity: 0.5; width: 1440px; height: 361px;"></div> <!-- black background --> </body> 

To show a div on top I recommend jqModal, it does all the hard work for you.

</div
 
 
 
 
1
 
vote
<Р> Посмотрите на модальной опции в JQuery UI Dialog или предупреждения JavaScript () функцию, если вам нужен только простой диалог текста.
 

Take a look at the modal option in jQuery UI Dialog or the JavaScript alert() function if you only need a simple text dialog.

</div
 
 
0
 
vote
<Р> Посмотрите на модальный вариант в JQuery UI Dialog или JavaScript <код> alert() функция, если вам нужно только текст диалога простой .
 

Take a look at the modal option in jQuery UI Dialog or the JavaScript alert() function if you only need a simple text dialog.

</div
 
 

Связанный проблема

0  Boxy Эта отправка не работает  ( Boxy this submit does not work ) 
У меня есть несколько форм в моем коде, и я хочу назначить подтверждающее поле, чтобы показать, прежде чем он будет отправлен. Следовательно, я использую Bo...

0  Модель только показывает идентификатор в вложенной модели в парусах  ( Model only show id in nested model in sails ) 
Так что я разрабатываю приложение, используя парус JS. Я хочу отправить нить вместе с его комментариями как ответ. Вот моя модель thread.js <код> module...

1  Как проверить отметку Check Column в сетке?  ( How to check mark a check column in a grid ) 
У меня есть флажок Check Column на сетке, которая мне нужна для программически проверки. Вот как сценарий Check Column: <код> columns: { items:[ ...

1  Как заменить адреса электронной почты с ссылками Mailto на веб-странице Live?  ( How to replace email addresses with mailto links in a live web page ) 
Представьте себе это: вы столкнулись с веб-страницей, который говорит: «Просто отправьте сообщение user@example.com», но чтобы на самом деле отправить электро...

3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS)  ( Is there any way to distinguish touch vs mouse interactions in windows 8 html ) 
Я в настоящее время строю приложение, которое имеет много внимания на панорамирование, которое выглядит и чувствует себя красиво, когда касается и манипулируе...

1  Обновление поле PDF штрих-кода в IOS и устройстве Android  ( Updating a pdf barcode field in ios and android device ) 
Я создал одну корпус Acrobat, используя радиообъекты, текстовое поле, кнопку, флажок и штрих-код в Adobe Acrobat Pro. После этого я открыл эту форму в Adobe...

0  Удалите подстроку из строки в jQuery [дублировать]  ( Remove a substring from a string in jquery ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

1  Код образец плагина PhoneGap VideoPlayer  ( Phonegap videoplayer plugin sample code ) 
Я пытаюсь реализовать видеозаписи в моем телефонном приложении. У меня есть идея реализовать этот плагин: https://github.com/dawsonloudon/videoPlayer Эт...

362  JavaScript Глобальный механизм событий  ( Javascript global event mechanism ) 
Я хотел бы поймать каждую неопределенную ошибку функции. Есть ли глобальная обработка ошибок в JavaScript? Чехол на использование ловит вызовы функций от Flas...

0  Разрежьте строку в JavaScript [Закрыто]  ( Cut the string in javascript ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...

4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {}))  ( What are the difference between document bindready function and docume ) 
Я хочу обновить от Verysjs версии 2.0.0 до 2.1.5 Вот код: <код> define(['jquery', 'test.js'], function ($, test) { var test = new $.test({ ...

-2  Как мне получить значение флажков ряд в таблице JavaScript  ( How do i get value of a checkboxes of a row in a table javascript ) 
Это может быть глупым вопросом, но мне нужно получить значения проверенных флажков определенной строки. <код> script5 Так что в основном я хочу, чтобы по...

5  Пользовательский стиль на раскрывающемся меню React-Buttrap  ( Custom style on react bootstraps dropdown menu component ) 
Я пытаюсь применить пользовательский стиль CSS к компоненту RACH BETSTRAP, но не может понять, как получить доступ к элементам, которые не являются явными в J...

0  Скачать изображение из результатов API  ( Download image from api results ) 
Я создаю приложение, которое использует онлайн API для рерантива изображений на основе ключевого слова для поиска. Я запускаю петлю Foreach для рендеринга 12 ...

1  UI-маршрутизатор в ионной структуре  ( Ui router in ionic framework issue ) 
У меня проблемы с тем, чтобы получить свои маршруты, чтобы соответствовать моим взглядам. У меня есть следующие маршруты: <код> .state('tab.account', { ur...

Связанный проблема

0  Boxy Эта отправка не работает 
0  Модель только показывает идентификатор в вложенной модели в парусах 
1  Как проверить отметку Check Column в сетке? 
1  Как заменить адреса электронной почты с ссылками Mailto на веб-странице Live? 
3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS) 
1  Обновление поле PDF штрих-кода в IOS и устройстве Android 
0  Удалите подстроку из строки в jQuery [дублировать] 
1  Код образец плагина PhoneGap VideoPlayer 
362  JavaScript Глобальный механизм событий 
0  Разрежьте строку в JavaScript [Закрыто] 
4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {})) 
-2  Как мне получить значение флажков ряд в таблице JavaScript 
5  Пользовательский стиль на раскрывающемся меню React-Buttrap 
0  Скачать изображение из результатов API 
1  UI-маршрутизатор в ионной структуре