Twitter Bootstrap模态窗口中的Datepicker [英] Twitter Bootstrap Datepicker within modal window
本文介绍了Twitter Bootstrap模态窗口中的Datepicker的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< div class =modal hide inid =newMemberstyle =display ：block;aria-hidden =false>
< div class =modal-header>
< button class =closedata-dismiss =modaltype =button>×< / button>
< h3>新会员表单< / h3>
< / div>
< form accept-charset =UTF-8action =/ playersclass =form-horizontalid =new_usermethod =post>< div style =margin：0 ; padding：0; display：inline>< input name =utf8type =hiddenvalue =✓>< input name =authenticity_tokentype =hiddenvalue =KdL6cc2Vb53qeMY + PpBUS70myT4HX1uWofMUBolLea8 =>< / div>
< div class =modal-body>
< div class =widget-content nopadding>
< div class =control-group>
< label class =control-labelfor =user_role>角色< / label>
< div class =controls>
< select id =user_rolename =user [role]style =display：none;class =chzn-done>< option value =>选择成员角色& / option>
< option value =1> Player< / option>
< option value =2> Coach< / option>
< option value =3>父< / option>
< option value =4> Manager< / option>
< option value =5>非玩家< / option>< / select>< div id =user_role_chznclass =chzn-container chzn-container-singlestyle =width ：222px;>< a href =javascript：void（0）class =chzn-single>< span>选择成员角色< / span>< div>< b>< / b>< / div>< / a>< div class =chzn-dropstyle =left：-9000px; width：220px; top：0px;>< div class =chzn-search style =>< input type =textautocomplete =offstyle =width：212px;>< / div>< ul class =chzn-results>< li id =user_role_chzn_o_0class =active-result result-selectedstyle =>选择成员角色< / li>< li id =user_role_chzn_o_1class =active-resultstyle => Player< ; / li>< li id =user_role_chzn_o_2class =active-resultstyle => Coach< / li>< li id =user_role_chzn_o_3class =active-resultstyle => ;父< / li>< li id =user_role_chzn_o_4class =active-resultstyle => Manager< / li> ;< li id =user_role_chzn_o_5class =active-resultstyle =>非玩家< / li>< / ul>< / div>< / div>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =user_full_name>全名< / label>
< div class =controls>
< input id =user_first_namename =user [first_name]placeholder =First Namesize =30type =text>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =user_last_name>姓氏< / label>
< div class =controls>
< input id =user_last_namename =user [last_name]placeholder =Last Namesize =30type =text>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =user_email> Email< / label>
< div class =controls>
< input id =user_emailname =user [email]placeholder =Email Addresssize =30type =text>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =user_date_of_birth>出生日期< / label>
< div class =controls>
< input class =datepickerdata-date-format =dd / mm / yyyyid =user_dobname =user [dob]placeholder =dd / mm / yyyyreadonly = readonlysize =30type =text>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =user_gender> Gender< / label>
< div class =controls>
< select id =user_gendername =user [gender]style =display：none;class =chzn-done>< option value =>选择性别&选项>
< option value =Male> Male< / option>
< option value =Female> Female< / option>< / select>< div id =user_gender_chznclass =chzn-container chzn-container-singlestyle =width：222px ;>< a href =javascript：void（0）class =chzn-single>< span>选择性别< / span>< div>< b>< / b>< ; / div>< / a>< div class =chzn-dropstyle =left：-9000px; width：220px; top：0px;>< div class =chzn-searchstyle = >< input type =textautocomplete =offstyle =width：212px;>< / div>< ul class =chzn-results>< li id = user_gender_chzn_o_0class =active-result result-selectedstyle =>选择gender< / li>< li id =user_gender_chzn_o_1class =active-resultstyle => Male< / li> < li id =user_gender_chzn_o_2class =active-resultstyle =>女性< / li>< / ul>< / div>< / div>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =user_team>团队< / label>
< div class =controls>
< select id =user_team_idname =user [team_id]style =display：none;class =chzn-done>< option value => None< / option> ;
< option value =4> Metro 3 East< / option>
< option value =1>状态联盟3< / option>
< option value =2>状态联盟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> Under 13 Pennant South East< / option>
< option value =9> Under 17 Pennant South East< / option>
< option value =10> 15以下南（1）< / option>
< option value =11> Under 11 Pennant South East< / option>
< option value =12> Under 11 South< / option>< / select>< div id =user_team_id_chznclass =chzn-container chzn-container-singlestyle =width ：222px;>< a href =javascript：void（0）class =chzn-single>< span> None< / span>< div>< b>< / b> < / div>< / a>< div class =chzn-dropstyle =left：-9000px; width：220px; top：0px;>< div class =chzn-search =>< input type =textautocomplete =offstyle =width：212px;>< / div>< ul class =chzn-results>< li id = user_team_id_chzn_o_0class =active-result result-selectedstyle => None< / li>< li id =user_team_id_chzn_o_1class =active-resultstyle => Metro 3 East& li>< li id =user_team_id_chzn_o_2class =active-resultstyle =>状态联盟3< / li>< li id =user_team_id_chzn_o_3class =active-resultstyle => ;状态联盟4< / li>< li id =user_team_id_chzn_o_4class =active-resultstyle => ; Metro 3 South< / li>< li id =user_team_id_chzn_o_5class =active-resultstyle => Pennant E< / li>< li id =user_team_id_chzn_o_6class =active-result style => Under 9 White< / li>< li id =user_team_id_chzn_o_7class =active-resultstyle => Under 9 Navy< / li>< li id =user_team_id_chzn_o_8 =active-resultstyle => Under 13 Pennant South East< / li>< li id =user_team_id_chzn_o_9class =active-resultstyle => Under 17 Pennant South East< / li> ;< li id =user_team_id_chzn_o_10class =active-resultstyle => Under 15 South（1）< / li>< li id =user_team_id_chzn_o_11class =active-resultstyle = > Under 11 Pennant South East< / li>< li id =user_team_id_chzn_o_12class =active-resultstyle => Under 11 South< / li>< / ul>< / div> ;< / div>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =user_mobile> Mobile< / label>
< div class =controls>
< input id =user_mobilemaxlength =10name =user [mobile]placeholder =即0421813529size =10type =tel>
< span class =help-block>
< input name =user [private_mobile]type =hiddenvalue =0>< div class =checkerid =uniform-user_private_mobile>< span>< div class =checkerid =uniform-user_private_mobile>< span>< input id =user_private_mobilename =user [private_mobile]type =checkboxvalue =1style =opacity： 0;>< / span>< / div>< / span>< / div>
< a href =javascript：void（0）class =tip-bottomdata-original-title =通常，团队的所有成员都可以看到这些信息，如果你不想要队友要查看此信息，只需单击此复选框（注意：团队经理将始终看到此信息。）> Private< / a>
< / span>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =user_manager_access>管理员访问< / label>
< div class =controls>
< input name =user [manager]type =hiddenvalue =0>< div class =checkerid =uniform-user_manager>< span> div class =checkerid =uniform-user_manager>< span>< input id =user_managername =user [manager]type =checkboxvalue =1style =opacity： 0;>< / span>< / div>< / span>< / div>
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =user_admin_access>管理访问< / label>
< div class =controls>
< input name =user [admin]type =hiddenvalue =0>< div class =checkerid =uniform-user_admin>< span>< div class =checkerid =uniform-user_admin>< span>< input id =user_adminname =user [admin]type =checkboxvalue =1style =opacity： 0;>< / span>< / div>< / span>< / div>
< / div>
< / div>
< / div>
< / div>
< div class =modal-footer>
< div class =pull-right>
< input class =btn btn-primaryname =committype =submitvalue =创建用户>
< a class =btn btn-dangerdata-dismiss =modalhref =＃>取消< / a>
< / div>
< / div>
< / form>
< / div>
解决方案
在类datepicker中添加zi index以上1051
在页面或CSS中添加类似的内容
< style>
.datepicker {z-index：1151！important;}
< / style>
I am currently using the Twitter Bootstrap framework, and when using the modal windows I cannot get over js elements to work like datepicker or validation, though chosen and uniform render correctly. please see my modal window below:
<div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h3>New Member Form</h3>
</div>
<form accept-charset="UTF-8" action="/players" class="form-horizontal" 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>
<div class="modal-body">
<div class="widget-content nopadding">
<div class="control-group">
<label class="control-label" for="user_role">Role</label>
<div class="controls">
<select id="user_role" name="user[role]" style="display: none; " class="chzn-done"><option value="">Select member role</option>
<option value="1">Player</option>
<option value="2">Coach</option>
<option value="3">Parent</option>
<option value="4">Manager</option>
<option value="5">Non-player</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>Select member role</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="">Select member role</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="">Coach</li><li id="user_role_chzn_o_3" class="active-result" style="">Parent</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="">Non-player</li></ul></div></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_full_name">Full name</label>
<div class="controls">
<input id="user_first_name" name="user[first_name]" placeholder="First Name" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_last_name">Last name</label>
<div class="controls">
<input id="user_last_name" name="user[last_name]" placeholder="Last Name" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_email">Email</label>
<div class="controls">
<input id="user_email" name="user[email]" placeholder="Email Address" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_date_of_birth">Date of birth</label>
<div class="controls">
<input class="datepicker" data-date-format="dd/mm/yyyy" id="user_dob" name="user[dob]" placeholder="dd/mm/yyyy" readonly="readonly" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_gender">Gender</label>
<div class="controls">
<select id="user_gender" name="user[gender]" style="display: none; " class="chzn-done"><option value="">Select gender</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>Select gender</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="">Select gender</li><li id="user_gender_chzn_o_1" class="active-result" style="">Male</li><li id="user_gender_chzn_o_2" class="active-result" style="">Female</li></ul></div></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_team">Team</label>
<div class="controls">
<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">Under 13 Pennant South East</option>
<option value="9">Under 17 Pennant South East</option>
<option value="10">Under 15 South (1)</option>
<option value="11">Under 11 Pennant South East</option>
<option value="12">Under 11 South</option></select><div id="user_team_id_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>None</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_team_id_chzn_o_0" class="active-result result-selected" style="">None</li><li id="user_team_id_chzn_o_1" class="active-result" style="">Metro 3 East</li><li id="user_team_id_chzn_o_2" class="active-result" style="">State League 3</li><li id="user_team_id_chzn_o_3" class="active-result" style="">State League 4</li><li id="user_team_id_chzn_o_4" class="active-result" style="">Metro 3 South</li><li id="user_team_id_chzn_o_5" class="active-result" style="">Pennant E</li><li id="user_team_id_chzn_o_6" class="active-result" style="">Under 9 White</li><li id="user_team_id_chzn_o_7" class="active-result" style="">Under 9 Navy</li><li id="user_team_id_chzn_o_8" class="active-result" style="">Under 13 Pennant South East</li><li id="user_team_id_chzn_o_9" class="active-result" style="">Under 17 Pennant South East</li><li id="user_team_id_chzn_o_10" class="active-result" style="">Under 15 South (1)</li><li id="user_team_id_chzn_o_11" class="active-result" style="">Under 11 Pennant South East</li><li id="user_team_id_chzn_o_12" class="active-result" style="">Under 11 South</li></ul></div></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_mobile">Mobile</label>
<div class="controls">
<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="Normally, all members of the team can see this information. If you don't want teammates to see this information, just click this checkbox. (Note: Team managers will always see this information.)">Private</a>
</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_manager_access">Manager access</label>
<div class="controls">
<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>
</div>
<div class="control-group">
<label class="control-label" for="user_admin_access">Admin access</label>
<div class="controls">
<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>
</div>
</div>
</div>
<div class="modal-footer">
<div class="pull-right">
<input class="btn btn-primary" name="commit" type="submit" value="Create User">
<a class="btn btn-danger" data-dismiss="modal" href="#">Cancel</a>
</div>
</div>
</form>
</div>
解决方案
add z-index above 1051 in class datepicker
add something like this in page or css
<style>
.datepicker{z-index:1151 !important;}
</style>
这篇关于Twitter Bootstrap模态窗口中的Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
