fenêtre modale javascript

Hello à tous !

Actuellement, j'ai une textbox. En double cliquant dessus, j'ai envie d'ouvrir une fenêtre sans perdre le focus sur la textbox.

J'ai réalisé un truc qui marche. Le seul souci, c'est qu'avec le clavier, je peux me balader de champs en champs.

Y-a t-il une solution pour empêcher de bloquer les contrôles clavier sur l'écran.

Voici mon code CSS+JavaScript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<script language="javascript" type="text/javascript">
function revealModal(divID)
{
    window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
    document.getElementById(divID).style.display = "block";
    document.getElementById(divID).style.top = document.body.scrollTop;
}
 
function hideModal(divID)
{
    document.getElementById(divID).style.display = "none";
}
</script>
<style type="text/css">
body
{
    margin: 0px;
}
#modalPage
{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px; left: 0px;
}
.modalBackground
{
    filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
    width: 100%; height: 100%; background-color: #999999;
    position: absolute;
    z-index: 500;
    top: 0px; left: 0px;
}
.modalContainer
{
    position: absolute;
    width: 300px;
    left: 50%;
    top: 50%;
    z-index: 750;
}
.modal
{
    background-color: white;
    border: solid 4px black; position: relative;
    top: -150px;
    left: -150px;
    z-index: 1000;
    width: 300px;
    height: 300px;
    padding: 0px;
}
.modalTop
{
    width: 292px;
    background-color: #000099;
    padding: 4px;
    color: #ffffff;
    text-align: right;
}
.modalTop a, .modalTop a:visited
{
    color: #ffffff;
}
.modalBody
{
    padding: 10px;
}
</style>

Code JSF :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<h:form id="jbForm1"> 
    <h:inputText value="#{richBean.name}" ondblclick="getElementById('jbForm1:bouton').click();" id="name">
    <a4j:support  event="onblur" action="#{richBean.lostFocus}" />
    <h:commandButton id="bouton" action="#{richBean.dblClick}" onclick="startWait();" style="visibility:hidden;"/>
</h:inputText>
    <div id="modalPage">
    <div class="modalBackground">
    </div>
    <div class="modalContainer">
        <div class="modal">
            <div class="modalTop"><a href="BLOCKED SCRIPThideModal('modalPage')">[X]</a></div>
            <div class="modalBody">
                <p>total solid</p>
            </div>
        </div>
    </div>
</div>

merci d'avance.