Question

如果用户处于空闲状态，我正在制作带有引导模式（密码验证）的锁屏，但是如果用户刷新页面然后将其删除并再次开始计算用户空闲，我想要显示模态和用户刷新以再次显示密码验证的模式

有什么想法吗？

<script type="text/javascript">

$.idleTimeout('#idletimeout', '#idletimeout a', {
	idleAfter: 5,
	pollingInterval: 2,
	keepAliveURL: '/keepAliveURL',
	serverResponseEquals: 'OK',
	onTimeout: function(){
    $(this).slideUp();

    document.getElementById('modal').click(); return false;


  },
	onIdle: function(){
		$(this).slideDown(); // show the warning bar
	},
	onCountdown: function( counter ){
		$(this).find("span").html( counter ); // update the counter
	},
	onResume: function(){
		$(this).slideUp(); // hide the warning bar
	}
});


</script>

  <button  type="button" class="btn btn-primary btn-lg" data-toggle="modal" id = "modal" data-target="#myModal"  style="display: none;">See Modal</button>


  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Idle user</h4>
      </div>
      <div class="modal-body">

          <form id ="validationform" action="{{action('PatientsController@verifyuser',request()->route('id'))}}" method="post" >
            {{ csrf_field() }}
            @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach

                </ul>
            </div>
            @endif
            <label for="">Password</label>
          <p>  <input type="password" name="password" value="" required autofocus> <p>

            <button type="submit"  class="btn btn-default">Submit</button>

          </form>

Answer 1

您可以执行以下操作，例如您使用的是Bootstrap模式：

{validate here if you want to show the modal to the user}
<script>
    $('#myModal').modal('show')
</script>
{validate here if you want to show the modal to the user}

<!-- Modal Code Here -->
    <div...>
<!-- Modal Code Here -->

你可以做的是验证用户是否处于非活动状态，并通过JS启动事件向用户显示模态并停用他可以关闭它

刷新后的模态保持打开

1 个答案: