Bootstrap，Modal 总是显示

Question

我正在关注 DevsBrasil' Laravel tutorial，试图裁剪用户图像。

而且模态总是显示..

这是一个控制器：

public function editUsers($userID) {

    $user = Sentry::findUserById($userID);

    $data = array();
    $data['image'] = Session::get('img');
    $data['modal'] = (Session::get('modal') == null ? 'false' : 'true');

    $group_p = $user->getGroups();

    $groups_p = [];
    foreach (Sentry::findAllGroups() as $group) {
        $groups_p [$group->id] = $group->name; 
    }

    return View::make('dashboard.users.edit')
    ->with('user',$user)
    ->with('group_p',$group_p)
    ->with('groups_p',$groups_p)
    ->with('data',$data);

}

public function updateUsers($userID) {

    $user = Sentry::findUserById($userID);


    return View::make('dashboard.users.edit')
    ->with('user',$user);
}

public function UploadImg($userID)
{
    if (Input::hasFile('image')) {

    $user = Sentry::findUserById($userID);

    $image_name = $image->getClientOriginalName();

    $image = Input::file('image');
            $filename  = $user->username . '.' . $image->getClientOriginalExtension();
            $path = public_path('img/users/' . $filename);
            $int_image = Image::make($image->getRealPath());

            $int_image->resize(568,null, function($constraint){
                $constraint->aspectRatio();
            });

            $int_image->save($path);
            $user->image = 'img/users/'.$filename;

            Session::put('modal','ture');
    }else{
    }

        return Redirect::back();

}

public function CropImg()
{
        return Redirect::back();
}

查看：

<!-- Tab content -->
                        <div id="tabImage" class="tab-pane innerAll">
                            <h4 class="innerTB">
                                Update {{ $user->name }} image. 
                            </h4>
                            <div class="row">
                                <div class="col-md-12 ">
<div class="bootbox modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Crop Image</h4>
         </div>
         <div class="modal-body">
            {{Form::open(array('route' => 'crop_user_image_post', 'onsubmit' => 'return checkCoords' ,'class'=>'form-horizontal'))}}
            {{HTML::image($data['image'], '' , ['id' => 'crop'] )}}
            <input type="hidden" id="src" name="src" value="{{ $data['image'] }}" >
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
         </div>
         <div class="modal-footer">
            <button data-bb-handler="Done" type="button" class="btn btn-success">Success!</button>
         </div>
         {{ Form::close() }}
      </div>
   </div>
</div>
{{Form::open(array('route' => 'update_user_image_post', 'method' => 'post','files'=>'true','class'=>'form-horizontal') , $user->id)}}
{{ HTML::image($user->img, $user->username, array('class' => 'img-circle' )) }}
{{Form::file('image')}}
<div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Upload Image <i class="fa fa-check"></i></button>
   </div>
</div>
{{ Form::close() }}
<input type="hidden" id="modal" value="{{$data['modal']}}" />
                                </div>
                            </div>
                        </div>
                        <!-- // Tab content END -->

JS代码：

我给输入隐藏的 id (#modal) 值来自控制器 $data['modal'] = (Session::get('modal') == null ? 'false' : 'true');

<script>
   var modal;
   if ($('#modal').val() == 'true' ) {
      modal = true;
   }else{
      modal = false;
   }

   $(document).ready(function(){
      $('#crop').Jcrop({
         aspectRatio: 1,
         onSelect: atualizaCoordenadas
      });
      $('#myModal').modal({show: modal});
   });

   function atualizaCoordenadas(c){
      $('#x').val(c.x);
      $('#y').val(c.y);
      $('#w').val(c.w);
      $('#h').val(c.h);
   }

   function checkCoords(){
      if (parseInt($('#w').val())) return true;
      alert('Error');
      return false;
   }

</script>

Answer 1

这就是模态不断显示的原因。

您在模态 div 中设置了 style="display:block"。内联样式优先于其他 CSS 样式。我没有查看 Bootstrap 源代码，但有可能使用 css 类而不是内联样式设置模态可见性。

看这里（滚动到最右端）：

<div class="bootbox modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">

您需要从 div 中删除 style="display:block"，如下所示：

<div class="bootbox modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

这里有一个更易读的 div 属性版本供您比较：

版本不正确

<div 
  class="bootbox modal fade in" 
  id="myModal" 
  tabindex="-1" 
  role="dialog" 
  aria-labelledby="myModalLabel" 
  aria-hidden="true" 
  style="display: block;"> <!--The issue is this `style` attribute-->

正确版本

<div 
  class="bootbox modal fade in" 
  id="myModal" 
  tabindex="-1" 
  role="dialog" 
  aria-labelledby="myModalLabel" 
  aria-hidden="true">