Partage
  • Partager sur Facebook
  • Partager sur Twitter

Jquery Modal box

Sélection d'une image parmi d'autres dans une modal box

10 juin 2013 à 16:27:10

Bonjour tout le monde,

Je suis en train de développer un système de news où on a la possibilité de sélectionner son image dans un modal box (qui va se remplir avec une liste d'image présente en base de données) avant de valider sa news.

J'ai fait plusieurs tests sans succès avec le code de cet exemple http://jqueryui.com/dialog/#modal-form.

L'idéal serait, une fois la modal box ouverte, de cliquer sur l'image voulu et qu'elle s'ajoute directement dans la page parente.

En gros c'est la même chose que lorsqu'on veut mettre un smiley dans un sujet du forum :D

Est-ce que c'est possible ? Si oui, quelqu'un peut il m'aider ??

Voilà mon code mais fonctionnel que pour une image :

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
	<title>jQuery UI Dialog - Modal form</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<style>
		body { 
			font-size: 62.5%; 
		}
		label, input { 
			display:block; 
		}
		input.text { 
			margin-bottom:12px; 
			width:95%; 
			padding: .4em; 
		}
		fieldset { 
			padding:0; 
			border:0; 
			margin-top:25px; }
		h1 { 
			font-size: 1.2em; 
			margin: .6em 0; 
		}
		div#users-contain { 
			width: 350px; 
			margin: 20px 0; 
		}
		div#users-contain table { 
			margin: 1em 0; 
			border-collapse: collapse; 
			width: 100%; 
		}
		div#users-contain table td, div#users-contain table th { 
			border: 1px solid #eee; 
			padding: .6em 10px; 
			text-align: left; 
		}
		.ui-dialog .ui-state-error { 
			padding: 0.3em; 
		}
		.validateTips { 
			border: 1px solid transparent; 
			padding: 0.3em; 
		}
	</style>
	  <script>
	  $(function() {
		var name = $( "#name" ),
		  link = $( "#link" ),
		  type = $( "#type" ),
		  allFields = $( [] ).add( name ).add( link ).add( type ),
		  tips = $( ".validateTips" );
	 
		function updateTips( t ) {
		  tips
			.text( t )
			.addClass( "ui-state-highlight" );
		  setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		  }, 500 );
		}
	 
		function checkRegexp( o, regexp, n ) {
		  if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		  } else {
			return true;
		  }
		}
	 
		$( "#dialog-form" ).dialog({
		  autoOpen: false,
		  height: 600,
		  width: 600,
		  modal: true,

		  close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		  }
		});
		
		$( "#test" )
			  .click(function() {
				var bValid = true;	 
				  if ( bValid ) {
					$( "#users tbody" ).append( "<tr>" +
					  "<td>" + name.val() + "</td>" +
					  "<td>" + link.val() + "</td>" +
					  "<td>" + type.val() + "</td>" +
					"</tr>" );
					$( this ).dialog( "close" );
				  }
			  });
		  
		$( "#select-image" )
		  .button()
		  .click(function() {
			$( "#dialog-form" ).dialog( "open" );
		  });
	  });
	  </script>
	</head>
	<body>
 
		<!-- PARTIE MODAL  -->
		<div id="dialog-form" title="Select an image">
				<input type="hidden" name="name" id="name" class="text ui-widget-content ui-corner-all" value="slide1" />
				<input type="hidden" name="link" id="link" class="text ui-widget-content ui-corner-all" value="./img/slide-1.jpg" />
				<input type="hidden" name="type" id="type" class="text ui-widget-content ui-corner-all" value="Autre valeur" />
				<img src="./img/slide-1.jpg" id="test"/>
		</div>
		<!-- FIN -->

		<!-- PARTIE TABLEAU -->
		<div id="users-contain" class="ui-widget">
		  <h1>Existing Users:</h1>
		  <table id="users" class="ui-widget ui-widget-content">
			<thead>
			  <tr class="ui-widget-header ">
				<th>Name</th>
				<th>Link</th>
				<th>Type</th>
			  </tr>
			</thead>
			<tbody>
			</tbody>
		  </table>
		</div>
		<button id="select-image">Select an image</button>
		 <!-- FIN -->
 
	</body>
</html>



Merci :pirate::p

-
Edité par Furthsnake 10 juin 2013 à 16:55:27

  • Partager sur Facebook
  • Partager sur Twitter
10 juin 2013 à 22:02:46

Un petit Up !!

Personne ne peut m'aider ? je galère un peu :p

  • Partager sur Facebook
  • Partager sur Twitter
Staff 19 juin 2019 à 15:27:30

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!