Jquery <select> css

I found how to do it (not hacking an existing plugin, you were right...) it's not fabulous but it's working!

HTML :

<div id="ContenuBasic">
<label for="basic">Your message:</label>
<input type="text" name="basic" id="basic" value="">

</div>

<a href="#" data-width="400" data-rel="popup_name" class="poplight">Messages Pré-enregistrés</a>
<div id="popup_name" class="popup_block">
<div class="message " id="msg1" >Choose a message</div>
<div class="transition"></div>
<div class="message" id="img1" ><p>Message1</p></div></a>
<div class="transition"></div>
<div class="message" ><p>Message2</p></div>
<div class="transition"></div>
<div class="message" ><p>Message3</p></div>
<div class="transition"></div>
<div class="message" ><p>Message4</p></div>


</div>  

Jquery :

jQuery(function($){

//Lorsque vous cliquez sur un lien de la classe poplight
$('a.poplight').on('click', function() {
    var popID = $(this).data('rel'); //Trouver la pop-up correspondante
    var popWidth = $(this).data('width'); //Trouver la largeur

    //Faire apparaitre la pop-up et ajouter le bouton de fermeture
    $('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('');

    //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup
    $('#' + popID).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
    $('body').append('<div id="fade"></div>');
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

    return false;
});


//Close Popups and Fade Layer
$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  
}); //...ils disparaissent ensemble

    return false;
});

});

$(document).ready(function(){$('.message').click((function(){

var val = $(this).text();
if(val !="Choisir un message pré-écrit")
document.getElementById("basic").value = val;
$('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  
});
}));});

CSS

#fade { 
display: none; 
background: #cecece;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}

a:link, a:visited {
font-family : 'Open Sans';
font-weight: 200;
text-decoration : none;
}
img.btn_close {
float: right;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

#msg1{
font-family : 'Open Sans';
font-weight: bold;
color: #3797d3;
margin-left : 20px;
margin-top : 10px;
}
#msg1:hover{
background-color : transparent;
}

.message p{
margin-top:8px;
padding-left : 30px;
}
.message{
width : 400px;
height : 50px;
padding-top:10px;
font-family : 'Open Sans';
font-weight: 200;
}

#basic
{
width: 100%;
}


#img1{
height : 80px;

}
.message:hover{
background-color : #3797d3;
color:white;
}

.transition{
width : 400px;
height : 1px;
background-color : #cecece;
}





.popup_block{
display: none; 
background: #fff;
border: 2px solid #cecece;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}