点击模式链接不会显示模式

时间:2019-09-03 14:31:49

标签: css bootstrap-modal

我的页面上有以下链接。当用户单击它时,我希望它弹出一个表单。

<a data-toggle="modal" href="#myModal">
    <i class="icon-plus"></i></i>ADD TASK
</a>

这是我想显示的模态代码:

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
        <div class="modal-body">
          {!! Form::open(['action' => 'TasksController@store','method'=>'POST','enctype'=>'multipart/form-data'])!!}
          <div class="form-group">
            {{Form::label('item','Create task')}} {{Form::text('item','',['class'=>'form-control','placeholder'=>'Insert here'])}}
          </div>
          {{Form::submit('submit',['class'=>'btn btn-primary','type'=>'submit','id'=>'submit'])}} {!! Form::close() !!}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

单击链接不会导致弹出窗口出现。我在做什么错了?

1 个答案:

答案 0 :(得分:0)

您需要在链接中添加data-target="#myModal"(并且应使用button而不是a