模态窗口中的 Twitter Bootstrap Datepicker [英] Twitter Bootstrap Datepicker within modal window

查看：27
本文介绍了模态窗口中的 Twitter Bootstrap Datepicker的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在使用 Twitter Bootstrap 框架，当使用模态窗口时，我无法让 js 元素像日期选择器或验证一样工作，尽管选择和统一呈现正确.请在下面查看我的模态窗口:

 
<form accept-charset="UTF-8" action="/players" class="form-horizo​​ntal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8=">

<div class="modal-body"><div class="widget-content nopadding"><div class="control-group"><label class="control-label" for="user_role">Role</label><div class="控件"><select id="user_role" name="user[role]" style="display: none; " class="chzn-done"><option value="">选择成员角色</option><option value="1">Player</option><option value="2">教练</option><option value="3">父</option><option value="4">Manager</option><option value="5">非玩家</option></select><div id="user_role_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>选择成员角色</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_role_chzn_o_0" class="active-result result-selected" style="">选择成员角色</li><li id="user_role_chzn_o_1" class="active-result" style="">Player</li><li id="user_role_chzn_o_2" class="active-result" style="">教练</li><li id="user_role_chzn_o_3" class="active-result" style="">父</li><li id="user_role_chzn_o_4" class="active-result" style="">Manager</li><li id="user_role_chzn_o_5" class="active-result" style="">非玩家</li></ul></div></div>

<div class="control-group"><label class="control-label" for="user_full_name">全名</label><div class="控件"><input id="user_first_name" name="user[first_name]" placeholder="名字" size="30" type="text">

<div class="control-group"><label class="control-label" for="user_last_name">姓</label><div class="控件"><input id="user_last_name" name="user[last_name]" placeholder="Last Name" size="30" type="text">

<div class="control-group"><label class="control-label" for="user_email">Email</label><div class="控件"><input id="user_email" name="user[email]" placeholder="Email Address" size="30" type="text">

<div class="control-group"><label class="control-label" for="user_date_of_birth">出生日期</label><div class="控件"><input class="datepicker" data-date-format="dd/mm/yyyy" id="user_dob" name="user[dob]" placeholder="dd/mm/yyyy" readonly="readonly" size=30"类型=文本">

<div class="control-group"><label class="control-label" for="user_gender">性别</label><div class="控件"><select id="user_gender" name="user[gender]" style="display: none; " class="chzn-done"><option value="">选择性别</option><option value="Male">Male</option><option value="Female">Female</option></select><div id="user_gender_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>选择性别</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_gender_chzn_o_0" class="active-result result-selected" style="">选择性别</li><li id="user_gender_chzn_o_1" class="active-result" style="">男</li><li id="user_gender_chzn_o_2" class="active-result" style="">女性</li></ul></div></div>

<div class="control-group"><label class="control-label" for="user_team">Team</label><div class="控件"><select id="user_team_id" name="user[team_id]" style="display: none; " class="chzn-done"><option value="">None</option><option value="4">Metro 3 East</option><option value="1">State League 3</option><option value="2">State League 4</option><option value="3">Metro 3 South</option><option value="5">Pennant E</option><option value="6">Under 9 White</option><option value="7">Under 9 Navy</option><option value="8">低于 13 Pennant South East</option><option value="9">低于 17 Pennant South East</option><option value="10">Under 15 South (1)</option>

<div class="control-group"><label class="control-label" for="user_mobile">Mobile</label><div class="控件"><input id="user_mobile" maxlength="10" name="user[mobile]" placeholder="i.e 0421813529" size="10" type="tel"><span class="help-block"><input name="user[private_mobile]" type="hidden" value="0"><div class="checker" id="uniform-user_private_mobile"><span><div class="checker" id="uniform-user_private_mobile"><span><input id="user_private_mobile" name="user[private_mobile]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div><a href="javascript:void(0)" class="tip-bottom" data-original-title="正常情况下，团队所有成员都可以看到此信息.如果不想让队友看到此信息，只需单击此复选框.(注意:团队经理将始终看到此信息.)">私人</a></span>

<div class="control-group"><label class="control-label" for="user_manager_access">管理员权限</label><div class="控件"><input name="user[manager]" type="hidden" value="0"><div class="checker" id="uniform-user_manager"><span><div class="checker" id="uniform-user_manager"><span><input id="user_manager" name="user[manager]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>

<div class="control-group"><label class="control-label" for="user_admin_access">管理员权限</label><div class="控件"><input name="user[admin]" type="hidden" value="0"><div class="checker" id="uniform-user_admin"><span><div class="checker" id="uniform-user_admin"><span><input id="user_admin" name="user[admin]" type="checkbox" value="1" style="opacity: 0; ">;</span></div></span></div>

<div class="modal-footer"><div class="pull-right"><input class="btn btn-primary" name="commit" type="submit" value="创建用户"><a class="btn btn-danger" data-dismiss="modal" href="#">取消</a>

</表单>

解决方案

在 class datepicker 中添加 1051 以上的 z-index

在页面或css中添加类似的内容