模态表单消失而无需单击表单答案

【问题标题】：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 设置为低于模态表单。

标签： javascript jquery html forms twitter-bootstrap

【解决方案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;
       }
      });

【讨论】：