h5 触发点
<tr>
<td>性别
<a id="my_sex" href="#myPopupDialog" data-rel="popup" data-position-to="window" class="my_data_input" data-transition="fade" type="text" data-role="none" >请输入性别</a>
</td>
</tr>
<tr>
h5弹出:
<div data-role="popup" id="myPopupDialog" data-theme="a" data-dismissible="false" data-overlay-theme="b" class="ui-corner-all">
<div data-role="header">
<h1>您的性别</h1>
</div>
<div data-role="main" class="ui-content" >
<!-- <h2>欢迎访问弹窗对话框!</h2> -->
<!-- <p>jQuery Mobile 非常有意思!</p> -->
<!-- <a href="#"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">
返回</a> -->
<fieldset data-role="controlgroup" data-type="vertical">
<legend>单击选择:</legend>
<label for="male">男</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">女</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
</div>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
</div>
js监听
$("#male").attr("checked","checked");//默认是男的
$( "#myPopupDialog" ).on({//监听性别myPopupDialog生命周期
popupbeforeposition: function() {//显示
console.log("myPopupDialog-popupbeforeposition");
},
popupafterclose: function() {//消失
console.log("myPopupDialog-popupafterclose");
genderSelected = $("input[name='gender']:checked").val();
var textGender="男";
if( genderSelected=="male"){
console.log("isMale-"+true);
textGender="男";
}else{
console.log("isMale-"+false);
textGender="女";
}
$("#my_sex").text(textGender).css("color","#000000");//性别选择后输入框显示 并且颜色为灰黑色
}
});