在选项卡内激活时引导模态

时间:2016-04-21 19:13:14

标签: jquery twitter-bootstrap bootstrap-modal

想知道是否有人可以帮助我。我有一个编辑按钮,它位于一个位于引导选项卡内的表中。当我单击编辑链接以显示模态窗口时,它不起作用。但是,当我在标签之外移动相同的编辑链接时,它就像一个魅力。我认为它与bootstrap利用jQuery处理选项卡的方式有关。我是一名jQuery初学者,所以没有足够的知识来解决这个问题。

感谢任何帮助

链接到调用模态

 <li><a href="#" class="btn btn-xs btn-primary" class="editToDo" data-toggle="modal" data-target="#editToDoModal"><span class="glyphicon glyphicon-pencil"></span></a></li>

模态代码

<div class="modal fade" id="editToDoModal" tabindex="-1" role="dialog" aria-labelledby="editToDoModal">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="editToDoModalLabel">Edit To Do Item</h4>
        </div>
        <div class="modal-body">
            <form method="post" action='{{url("/todo/")}}' class="editFormTodoModal" >
                {{csrf_field()}}
                <input type='hidden' name='_method' value='PATCH'>
                <input type='hidden' name='event_id' value="{{$event->id}}">


                <div class="form-group">
                    <label for="message-text" class="control-label">Task:</label>
                    <input type="text" class="form-control" name="description" value="">
                    {{--<textarea class="form-control description auto_grow" name="description" id="to_do_description"></textarea>--}}
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Update</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>

    </div>
</div>

这是标签html

    <ul class="nav nav-tabs">
           <li class="active"><a href="#tasks" data-toggle="tab">Tasks</a></li>
          <li class=""><a href="#related_files" data-toggle="tab">Related Files</a></li>
         <li class=""><a href="#event_staff" data-toggle="tab">Event Staff</a></li>
                                            </ul>

实际标签的代码 <div class="tab-content"> <div class="tab-pane active" id="tasks"> There is a lot more code but the edit link sits here inside a table </div> </div>

0 个答案:

没有答案