ouvrir fenêtre en bas de l'ecran

**gophette** · 12/02/2013, 17h50

Bonjour,
Je suis entrain de developper un chat et je voudrai que les utilisateurs puissent ouvrir la fenêtre du chat en bas à droite de l'écran comme suit (http://www.livechatinc.com/) voir fichier.

Comment puis je faire pour ouvrir une popup de cette manière ?
Merci

**Lakhdr** · 12/02/2013, 20h18

c est assez complexe pour styler comme sur votre site ! mais pour vous aider a demarrer je vus donne cette exemple vite fait

c est base sur JQuery toggle et css avc la position fixed a bottom 0 et right 0 ce qui fixe la panneau en bas a droite

voici l exemple! :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
 
  <head lang="fr-FR">
 
    <meta charset="utf-8">
    <title>Custom Plunker</title>
      <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
 
  <style>
      #container {
          width: 220px;
          position: fixed;
          bottom: 0;
        right:0;
        border:1px solid #AAA;
      }
 
      #header {
          padding: 10px;
      }
 
      #content {
          display: none;
          background-color: #6D6D6D;
          padding: 10px;
      }
     #button{
     float:right;
    } 
  </style>
  <script>
  $(function() {
   $("#button").click(function(e){
        $("#content").slideToggle("slow");
        e.preventDefault();
                return false;
    });
  });
  </script>
   </head>
  <body>
    <div id="container">
            <div id="header">
  		   <span>ici un titre<span>
			   <a href="#" id="button">bouton ou image</a>  
			</div>
            <div id="content">
                <p> 
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				</p>
            </div>
        </div>
 
 
  </body>
 
</html>

et voici le lien pour le tester en ligne !! et bien sure l ameliorer pour vos besoins precis http://embed.plnkr.co/YyhTUmOqYptnpppYgTSy

voilà j espere que ca va vous aider

**gophette** · 13/02/2013, 09h56

Merci, je vous souhaite une trés brillante carrière.

ouvrir fenêtre en bas de l'ecran

JavaScript

Vue hybride

Discussions similaires

Partager

Partager