Jquery <选择> CSS

Question

我正在尝试构建一个带有邮件的移动应用程序，您可以在其中选择示例消息。我的问题是，当您点击“选择一条消息”(选择的开头)时，会出现一个弹出窗口，您可以选择该消息。但是我不能(或者只是找不到如何)改变这个弹出窗口的皮肤......有人知道吗？我的代码:

JavaScript:

function selection(select) {
    var valeur = select.options[select.selectedIndex].value;
    if(valeur !="Messages Pré-enregistrés")
        document.getElementById("basic").value = valeur;

}

HTML:

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

<select onchange="selection(this)">
    <option value="">Choisissez un message</option>
    <option value="Pneu crevé">Pneu crevé</option>
    <option value="Batterie morte">Batterie morte</option>
    <option value="Accident">Accident</option>
    <option value="Flic">Flic</option>
</select>

CSS: design.css

select, select :hover {

    width: 100%;
    margin-right : 10px;
    margin-left : 10 px;
    height: 34px;
    overflow: hidden;
    -webkit-appearance: none;
    appearance:none;
    background-color : #3797d3;
    color : white;
    font-size : 14px;
    font-weight: 100px;
 }

Answer 1

我找到了如何做到这一点(不是破解现有插件，你是对的......)它并不美妙，但它正在工作!

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>  

J查询:

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;
}