刷新后的模态保持打开[关闭]

Question

I am making a lockscreen with bootstrap modal (password validation) if user is idle then the modal is displayed but if user make a refresh of page then its removed and start counting again for user idle, i want if modal displayed and user make refresh to show again the modal for password validation

Any ideas?

<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>

</div>

Answer 1

You can do the following, say for example that you are using the Bootstrap modal:

{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 -->

Here what you can do is validate that the user is inactive and through JS launch the event to show the modal to the user and deactivate that he can close it