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

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:

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

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.

Forums des Zéros

Jquery Modal box

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

Déterrage

Jquery Modal box

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

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs