VPF::bootstrap datepicker - Форум программистов

smily

Дата 16.11.2012, 03:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 26.11.2006

Репутация: нет
Всего: нет

Использовал: bootstrap v2.2.1, jquery v1.8.2, компонент Datepicker for Bootstrap тынц
Имеется страница с возможностью вызова диалогового окна с формой ввода.
вводимым значением является дата, которую нужно выбрать с помощью календаря.

Реализовал следующим образом:

Код


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>...</title>    
    <link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
     <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/datepicker.css" rel="stylesheet">
</head>
<body>
<script src="js/jquery-1.8.2.js"></script>    
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-datepicker.js "></script>
<a class="btn btn-success" id="openMyModal" href="#myModal"><i class="icon-plus icon-white"></i> Добавить</a>

<div class="modal hide static" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Создание документа</h3>
  </div>
  <div class="modal-body">    
    <form class="form-horizontal">
     <fieldset>            
     <div class="control-group">
     <label class="control-label " for="dateP">Дата публикации на сайте (по плану закупок)</label>
     <div class="controls">    
        <input type="text" class="input-xsmall" id="input04">    
     </div>
     </div>     
     </fieldset>
    </form>    
</div>    
<script>
 $('#input04').click(function (e) {
  $("#input04").datepicker();  
 });    
</script>
</body>

но проблема: при клике на поле, календарик открывается не в модальном окне а на основной странице: user posted image

Как победить?

Это сообщение отредактировал(а) smily - 16.11.2012, 04:16

Aliance

Дата 16.11.2012, 11:00 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

На сколько я помню в стандартных компонентах bootstrap`а нет datepicker`а. Видимо, это форк со стороны. В таком случае не удивительно, что он так глючит.
Как варианты:
- поставить zIndex прямо в css больше
- ловить open datepicker`а и прятать модальное окно до close datepicker`а.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

smily

Дата 21.11.2012, 12:11 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 26.11.2006

Репутация: нет
Всего: нет

Цитата(Aliance @ 16.11.2012, 11:00)

после нескольких манипуляций с CSS, и добавления (а его не было изначально) параметра z-index заработало.

Зы. thx smile

ЗыЗы. единственное что добавлю, параметр z-index отрабатывает только при правильном позиционировании элемента ( .position: absolute)

Это сообщение отредактировал(а) smily - 21.11.2012, 12:13

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »