Как показать всплывающее окно в HTML + JQuery + CSS?

Question

Как показать всплывающее окно в HTML + JQuery + CSS?

0

Как показать всплывающее окно? Он не отображается первым, когда пользователь нажимает кнопку; Я столкнулся с несколькими проблемами.

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

2) Есть ли какой-нибудь css-переход, который мы можем использовать в моем всплытии? Мы показываем, что всплывает как анимация (перемещение вверх с несколькими секундами).

скрипка

<button  class ="btn" id="bt"> Pop up</button>

<div class ="container" >
    <h1 class="title"> Title</h1>
    <div class="left"> left</div>
    <div class="right">right</div>
    <div class="bobyclass">body</div>
    <div class="fotter">fotter</div>

</div>

благодаря

user2648752 15 дек. 2013, в 04:21

Источник

1

По скрипке я вижу, что у тебя в голове не все ясно. Я бы посоветовал вам сделать больше упражнений и лучше понять, как работает объектная модель документа и как с ней манипулируют. Это поможет вам решить проблему самостоятельно.
php_nub_qq 15 дек. 2013, в 02:39
0

Что вы подразумеваете под всплывающим?
Mark 15 дек. 2013, в 03:34
0

Я контейнер, который отображается над экраном
user2648752 15 дек. 2013, в 03:38
0

Взгляните на возможности диалогового окна jQuery. $ ( 'контейнер') диалог ().
Bob Tate 15 дек. 2013, в 03:46
0

@user2648752 user2648752 позиция: исправлена; внизу: 0; слева: 50%; поле слева: -100px; это исправит кнопку внизу страницы и в середине ... все еще трудно получить то, что вы хотите / нужно ...
Catalin Sterian 15 дек. 2013, в 03:54
0

@CatalinSterian, почему цвет тела не заполнен полностью, это пространство. jsfiddle.net/TGHyb/1
user2648752 15 дек. 2013, в 04:09
0

Не левая часть и правая часть (цвет должен заполнять свое пространство в теле, слева и справа)
user2648752 15 дек. 2013, в 04:10
0

body {background-color: lightblue; }
Catalin Sterian 15 дек. 2013, в 06:31
0

Вы можете использовать jQuery Dialog. Пример: jsfiddle.net/TGHyb/2.
Satpal 29 дек. 2013, в 09:09

Показать ещё 7 комментариев

Теги:

javascript

jquery

html

css

css3

1 ответ

Ещё вопросы

По скрипке я вижу, что у тебя в голове не все ясно. Я бы посоветовал вам сделать больше упражнений и лучше понять, как работает объектная модель документа и как с ней манипулируют. Это поможет вам решить проблему самостоятельно.
Что вы подразумеваете под всплывающим?
Я контейнер, который отображается над экраном
Взгляните на возможности диалогового окна jQuery. $ ( 'контейнер') диалог ().
@user2648752 user2648752 позиция: исправлена; внизу: 0; слева: 50%; поле слева: -100px; это исправит кнопку внизу страницы и в середине ... все еще трудно получить то, что вы хотите / нужно ...
@CatalinSterian, почему цвет тела не заполнен полностью, это пространство. jsfiddle.net/TGHyb/1
Не левая часть и правая часть (цвет должен заполнять свое пространство в теле, слева и справа)
Вы можете использовать jQuery Dialog. Пример: jsfiddle.net/TGHyb/2.

Merlin · Answer 1 · 2013-12-28T19-05-00.000Z

Вы можете сделать это с помощью bootstrap modal здесь пример FIDDLE

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если связанная страница изменится.
Каждый день мы чему-то учимся :) Как вы предлагаете, я обновил свой ответ.