Javascript 模式窗体将在不单击窗体的情况下消失
我们有一个表单,可以正确工作并通过正确的方式提交。当我将表单转换为模态(引导)时,问题就出现了。当表单呈现时,用户可以通过制表符进行切换并键入正确的内容。选择框工作,可以按键盘上的enter键;但是,当我使用鼠标并单击模态上的任何元素(包括背景)时,它会消失。请帮忙。代码如下:Javascript 模式窗体将在不单击窗体的情况下消失,javascript,jquery,html,forms,twitter-bootstrap,Javascript,Jquery,Html,Forms,Twitter Bootstrap,我们有一个表单,可以正确工作并通过正确的方式提交。当我将表单转换为模态(引导)时,问题就出现了。当表单呈现时,用户可以通过制表符进行切换并键入正确的内容。选择框工作,可以按键盘上的enter键;但是,当我使用鼠标并单击模态上的任何元素(包括背景)时,它会消失。请帮忙。代码如下: $('#new_event').click( function() { $('#all-events').toggle(false); $('#all-invitations').togg
$('#new_event').click( function() {
$('#all-events').toggle(false);
$('#all-invitations').toggle(false);
$('#friend-requests').toggle(false);
$('#feed').toggle(false);
$('#time-select-start').toggle(false);
$('#time-select-end').toggle(false);
$('#event-type-select').toggle(false);
$('#event_location').val('Current Location');
$('#event_location').attr('readonly',true);
$('#new-event').toggle();
check_dashboard();
});
观点:
%a{'href' => '#new-event','data-toggle' => 'modal', 'class' => 'btn btn-primary btn-small'}
new event
:
:
#new-event{'class' => 'modal hide fade'}
= render 'events/new_event'
表格如下:
.modal-form
.fieldset
.container
%center
.well.span6{:style => "position:relative; right:2.1%;background-color:#ffffff;"}
%h1{:style => 'font-family:eight_one;font-weight:normal;color:#ff6699;'} quick rondé
= form_for(@event, html: { class: 'form-vertical' }) do |f|
%div
= f.text_field :name,:autofocus => 'true',:placeholder => "event name"
%div
= f.text_area :description, rows: 3, :placeholder => "give your friends some more details and convince them to come "
%div
= f.text_field :location,:placeholder => "location"
%div
= f.text_field :event_type, :placeholder => 'event type'
%ul.span3.dropdown-menu#event-select-type{:style => 'position:absolute; left:27.65%;top:63%;',"role" => "menu"}
%li
%a#Food{:href => '#'} food
%a#Drink{:href => '#'} drink
%a#Other{:href => '#'} other
%div
= f.text_field :start, :placeholder => 'start time'
%ul.span3.dropdown-menu#time-select-start{:style => 'position:absolute; left:27.65%;top:73%;',"role" => "menu"}
%li#time-list-start
%div
= f.text_field :end, :placeholder => 'end time'
%ul.span3.dropdown-menu#time-select-end{:style => 'position:absolute; left:27.65%;top:82%;',"role" => "menu"}
%li#time-list-end
%a{'data-dismiss' => 'modal'} Cancel
= f.submit value: 'Create', class: 'btn btn-info'
任何帮助都会很好。我不熟悉javascript、haml和modals……谢谢。您是否尝试过阻止表单上的默认操作
$(document).bind("modal-form",function(e){
return false;
});
或者处理鼠标事件
$(".modal-form").mouseup(function(e){
switch(e.which){
case 1:
left click event;
break;
case 2:
middle click event;
break;
case 3:
right click event;
break;
default:
default action;
}
});
例如,您是否尝试过使用Firebug检查页面上的元素?可能有一些div的z-index比表单高,如果存在,请尝试查找它,并将其z-index设置为低于模态表单。