jQuery Modal box : Sélection d'une image parmi d'autres dans une modal box
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.
Est-ce que c'est possible ? Si oui, quelqu'un peut il m'aider ??
Voilà mon code mais fonctionnel que pour une image :
Code:
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
| <!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 !!
