模态表单消失而无需单击表单
Posted
技术标签:
【中文标题】模态表单消失而无需单击表单【英文标题】:modal form disappears without on clicking the form 【发布时间】:2013-12-16 08:02:03 【问题描述】:我们有一个可以正常工作并通过正确提交的表单。当我将表单变成模态(引导程序)时,问题就出现了。当表单呈现时,用户可以通过标签浏览并输入就好了。选择框起作用,可以按键盘上的回车键;但是,当我使用鼠标并单击模式上的任何元素(包括背景)时,它就会消失。请帮忙。代码如下:
$('#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 的新手...谢谢。
【问题讨论】:
您是否尝试过使用 Firebug 检查页面上的元素?可能有一些 div 的 z-index 比表单高,如果存在,请尝试找到它并将其 z-index 设置为低于模态表单。 【参考方案1】:您是否尝试过阻止表单上的默认操作?
$(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;
);
【讨论】:
以上是关于模态表单消失而无需单击表单的主要内容,如果未能解决你的问题,请参考以下文章