Boite anovible

ivan -
ivan - 16 juil. 2015 à 21:05

Bonjour,

j'ai voulu mettre ca

http://jqueryui.com/dialog/

une fenetre anovible

mais je n'arrives pas a trouver le css ni javasscript

es ce qu'unpeut m'aider a voir le bon code

merci

Afficher la suite

A voir également:

Boite anovible
Boite gmail pleine - Guide
Se connecter à ma boite hotmail - Guide
Boite gmail bloquée - Guide
Boite a couleur - Télécharger - Divers Photo & Graphisme
Creer boite mail hotmail - Guide

9 réponses

Réponse 1 / 9
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Bonjour,

Si tu cliques sur le bouton view Source de l'exemple du site jquery.com
tu peux voir l'url contenant le css :
http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css
https://jqueryui.com/resources/demos/style.css
0

ivan

merci par exemple j'ai mis un lien

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>

<a href="boite.html" onClick="window.open('boite.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=1, copyhistory=0, menuBar=0, width=1000, height=500, left=1000, top=500');return(false)">boite </a></body>
</html>

et coment metre ma page en forme de fenetre anovibnle

qui est

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
 
</body>
</html>

c'est ca que je coince e fait bien mon lien avec pop up mais la fenetre n'est pas la bone fenetre qui devrait etre anovible

merci

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Ne confond pas les fenêtres modales (ce que tu nomme boite amovible) ... et les "popup" !

Pour ouvrir la modale ... c'est le deuxième code qu'il faut utiliser ... (et UNIQUEMENT celui la....)

Si tu veux déclencher l'ouverture de la dialogue par un bouton ...
il suffit de faire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body>

<input type="button"  onClick="ouvrirBoite();" value="Ouvrir Boite">

  <script type="text/javascript">
  function ouvrirBoite(){
    $( "#dialog" ).dialog();
  }
  
  </script>

<div id="dialog" title="Basic dialog" style="display:none">
 <!-- ICI tu places le code de ce que tu veux afficher...... -->
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
</body>
</html>

Réponse 4 / 9
ivan

merci juste une class our le css

là il y a un juste un id avec dialog

es ce qu'il faut mettre tout les code css ou on peut prendre les bon css mais je ne vois pas lequele meme en utilisant inspecter element je voit des clss mais je ne sais pas ou ilson

par emple je vois dans la source la class .ui-dialog .ui-dialog-content mais pas dans ma page
merci
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
 
 Cest le script jquery qui les ajoutes.
 
 0
2. ivan
 
 ok mais il un ou 2 choses
 
 si je mets <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 
 là il y a la couleurs et la croix lui il y a mis en image
 
 mais si je fait ca je ne peut ps modifier les couleur ni la croix
 
 mais si je met le css sur ma page style.css là je peux éventuellement changer la couleur etc...
 
 mais come la croix n'afiche pas car je n'ai pas son image
 
 mais moi je veux mettre un
 
 a la place de son image
 
 hors je ne peux pas car e n'ai pas acée a le bon code
 
 es ce qu'il y a un moyen ou pas
 
 0
 1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830 > ivan
 
 Regardes ici :
 
 https://stackoverflow.com/questions/17386839/custom-style-to-jquery-ui-dialogs
 
 https://api.jqueryui.com/dialog/
 
 0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question

ivan

merci mais si je mets



lors du clique ca apparait bien le cadre anovible

  <script type="text/javascript">
  function ouvrirBoite(){
    $( "#dialog" ).dialog();
  }
  
  </script>

<div id="dialog" title="Basic dialog" style="display:none">
 <!-- ICI tu places le code de ce que tu veux afficher...... -->
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

mai pour l'autre code que tu ma trouver

si je met bien tout sur ma page

			<script type="text/javascript">
			
			$('#success').dialog({
	height: 50,
	width: 350,
	modal: true,
    resizable: false,
	dialogClass: 'no-close success-dialog'
});</script>
			
		<div id="popup-msg">
	<div id="loading">
		<h2>Loading...</h2>
		<h3>Please wait a few seconds.</h3>
	</div>	
	
	<div id="success" title="Hurray,">
		<p>User table is updated.</p>
	</div>
</div>

je vois juste le texte h2 et h3

ca met pas un mot quand on clique mot ca fera ouvrit cette fenêtre amovible

car je veux quand on clique sur mon span



es ce que tu peut regarder faire une fenetre que je peut echanger de couleur etc..

merci

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Il semble surtout que tu n'aies pas les bases .....
Il faut que tu apprennes le B.A.BA de la programmation ... ce qu'est une fonction... comment on l'appel .....
Sans ça ... difficile pour toi de savoir quoi faire !!!

Si on reprend mon code pour qu'il corresponde à tes attentes....

<script type="text/javascript">
 function ouvrirBoite(){
    $( "#dialog" ).dialog({
                       height: 100,
                       width: 350,
                       modal: true,
                       resizable: false,
                       dialogClass: 'no-close success-dialog'
                    });
  }
 
</script>

<span class="icon-deplacermp" onclick="ouvrirBoite();" title=""></span>


<div id="dialog" title="Basic dialog" style="display:none">
 <!-- ICI tu places le code de ce que tu veux afficher...... -->
  <div id="loading">
     <h2>Loading...</h2>
     <h3>Please wait a few seconds.</h3>
  </div> 

  <div id="success" title="Hurray,">
   <p>User table is updated.</p>
  </div>
</div> <!-- Fin DIV dialog -->

Cordialement,
Jordane

Réponse 7 / 9
ivan

merci mais pour change la couleur sur css
car j'ai mis ca

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

je ne peut pas le changer la couleur a moin de copier son css et le mettre dans ma page css
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
 
 je ne peut pas le changer la couleur a moin de copier son css et le mettre dans ma page css
 
 Et bien où est le PB ?
 Au contraire ... je t'invite à le copier pour que tu puisses le modifier à ta guise .....
 
 0
Réponse 8 / 9
ivan

mais si je met le css sur ma page il me done

http://communautaire.legtux.org/boite.html

là il naffiche plus ma crois et il y a scrooll

merci
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Comment mets tu le css sur ta page ??
  Tu as bien enregistré le CSS dans un fichier .CSS .. puis fais un include (comme il l'était avec l'url.. mais en pointant sur TON fichier cette fois).
  
  Quoi qu'il en soit .. sans voir ton code ... impossible de t'aider !
  
  **** Attention ****
  Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
  Explications disponibles ici :
  https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
  
  .
  
  0
2. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Bien sûr ... dans leur CSS .. ils pointent peut être vers des images .....
  Il faut donc que tu mettes également des images sur ton serveur... et que tu adaptes le CSS pour pointer dessus.
  
  0
Réponse 9 / 9
ivan

voilà ma page html
http://pastebin.com/L6qTZjhH

et sur la page css j'ai mis

http://pastebin.com/SzvfziyY

j'ai tester de mettre un overflow:hidden; ca ne marche pas
ou augmenter le height et là c'est bon

c'est bizzarre que ce n'est pas automatique
0

Boite anovible

9 réponses

Discussions similaires

Newsletters