Sujet Précédent Sujet Suivant

Boite anovible

Fermé
ivan - 14 juil. 2015 à 12:03
 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

A voir également:

9 réponses

Réponse 1 / 9
jordane45 Messages postés 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 4 722
14 juil. 2015 à 13:42
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
Réponse 2 / 9
ivan
14 juil. 2015 à 15:16
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
0
Réponse 3 / 9
jordane45 Messages postés 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 4 722
14 juil. 2015 à 15:36
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>

0
Réponse 4 / 9
ivan
14 juil. 2015 à 16:24
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
jordane45 Messages postés 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 4 722
14 juil. 2015 à 16:39
Cest le script jquery qui les ajoutes.
0
ivan
14 juil. 2015 à 18:54
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

<span class="icon-supprimer"></span> 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
jordane45 Messages postés 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 4 722 > ivan
14 juil. 2015 à 19:24
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
Réponse 5 / 9
ivan
14 juil. 2015 à 23:58
merci mais si je mets

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

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

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


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

merci
0
Réponse 6 / 9
jordane45 Messages postés 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 4 722
Modifié par jordane45 le 15/07/2015 à 01:07
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
0
Réponse 7 / 9
ivan
15 juil. 2015 à 19:49
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
jordane45 Messages postés 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 4 722
15 juil. 2015 à 19:50

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
15 juil. 2015 à 22:07
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
jordane45 Messages postés 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 4 722
15 juil. 2015 à 22:11
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
jordane45 Messages postés 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 4 722
15 juil. 2015 à 22:13
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
16 juil. 2015 à 21:05
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

Discussions similaires

comment avoir accès à ma boîte mail live.fr
mag -
Redbart -

1 réponse
Ouvrir ma boite hotmail pour accéder à mes mails
mykette06 -
noella4646 -

4 réponses
ouvrir ma boite de reception hotmail
oublié -
Utilisateur anonyme -

1 réponse
comment regarder mes mails "live.fr"
gweny19101 -
Dih -

8 réponses