Показать окно с фокусом текстового поля, обертывание текстового поля

Question

На самом деле гораздо проще показать вам, чего я хочу достичь, вместо того, чтобы пытаться объяснить.

Состояние 1:

Поле шлюшка не ответственные фокус. Довольно просто.

Государственный 2:

В поле Ответственные получил фокус. Рядом с текстовым полем и текстом отображается div.

Это не проблема с отображением серой коробки и ее позиционированием. Проблема заключается в том, чтобы текстовое поле отображалось внутри коробки, но при этом сохраняло текущую позицию.

Когда текстовое поле находится в абсолютном порядке (проверено z-index), содержимое перепутано.

Я использую jQuery.

Любые идеи кто-нибудь?

Answer 1

Вам не нужно указывать абсолютное положение текстового поля. Просто дайте ему положение: относительный и установите zIndex, чтобы он появился поверх серой коробки. Если он имеет позицию: статический (по умолчанию), zIndex не будет работать.

Answer 2

Вы посмотрели jQuery Tools Expose?

---

Вот код, используя Expose с ... Я при наведении курсора мыши также отправил образец в этом pastebin

$(function() { 
$("#test").hover(
    function() { 
    $(this).expose({api: true}).load() 
    }, function() { 
    $(this).expose().close(); 
}); 
}); 

---

Edit: К сожалению, вот код для фокусировки & размытия:

$(function() { 
$("#test") 
    .focus(function() { 
    $(this).expose({api: true}).load(); 
    }) 
    .blur(function() { 
    $(this).expose().close(); 
    }); 
}); 

---

Редактировать # 3: Просто потому, что у меня OCD и я не могу оставить вещи, зависящие от LOL ... Я разработал скрипт, который делает то, что вы хотите, без использования Expose (также опубликовано this pastebin). Вы можете добавить затухание и исчезнуть, если хотите.

CSS

input, select { width: 200px; } 
#expose { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background-color: #444; 
z-index: 99; 
} 
.focused { 
position: relative; 
top: 0; 
left: 0; 
z-index: 100; 
} 
label.focused { 
color: #ddd; 
} 

HTML (я пытался имитировать изображение)

<fieldset><legend>Fields</legend> 
<label for="frespon">Responsibilites:</label><br/> 
<input type="text" id="frespon" class="expose" /><br/> 
<br/> 

<label for="fprojectid">ProjectID:</label><br/> 
<select id="fprojectid" class="expose"> 
<option value='-'>-</option> 
</select><br/> 
<br/> 

<label for="fstatusid">StatusID:</label><br/> 
<select id="fstatusid" class="expose"> 
<option value='-'>-</option> 
</select><br/> 
<br/> 

<label for="ftypeid">TypeID:</label><br/> 
<select id="ftypeid" class="expose"> 
<option value='-'>-</option> 
</select><br/> 
<br/> 

<label for="ftitle">Title:</label><br/> 
<input type="text" id="ftitle" class="expose" /><br/> 
</fieldset> 

Scripting

$(document).ready(function(){ 
$('.expose').focus(function(){ 
    $('<div></div>') 
    .attr('id','expose') 
    .appendTo('body'); 
    $(this).addClass('focused') 
    .parent().find('label[for="' + this.id + '"]').addClass('focused'); 
}) 
$('.expose').blur(function(){ 
    $('.expose').removeClass('focused') 
    .parent().find('label[for="' + this.id + '"]').removeClass('focused'); 
    $('#expose').remove(); 
}) 
})