Exit button with message

Question

Exit button with message

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I'm trying to use bootstrap 3 along with VRaptor 3 and I'm having a problem with the menu.

It happens that I have the "exit" option in this menu and I'm lost.

I need the user to click on "exit", open a window asking if this is what they want and giving "ok" to exit the system.

<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Rede Olp</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="<c:url value="/inicial"/>">Home</a></li>
                    <li><a href="<c:url value="/logout"/>">Sair</a></li>

                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                </form>
            </div>
        </div>
    </nav>

javascript bootstrap-3

asked by anonymous 02.03.2016 / 23:07

3 answers

3

Use confirm() to get the user's confirmation, if he really wants to leave.

As the element is a hyperlink that already points to the feature that logout , you only need to prevent Event#preventDefault() ) it is called if the return of confirm is false.

If the user presses OK the default browser behavior will continue and the feature will be called, otherwise no action will be taken:

$(function(){
  $('#sair').on('click', function(event){
    
    if (!confirm('Pressione "OK" se deseja realmente sair.'))
        event.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id='sair' href='/logout/'>Sair</a>

03.03.2016 / 00:44

0

Follow the solution:

<a href="<c:url value="/logout"/>" class="btn btn-primary" role="button">Sim</a>

Thank you to all who helped me!

03.03.2016 / 05:07

Show data and click on it to open How to clean the combobox without losing the items?

score 1 · Accepted Answer

You can include a modal to inform your user if you really want to quit.

Example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><navclass="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Rede Olp</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="<c:url value=" /inicial "/>">Home</a>
        </li>
        <li><a href="#" data-toggle="modal" data-target="#myModal">Sair</a>
        </li>

      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
      </form>
    </div>
  </div>
</nav>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" 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="myModalLabel">Atenção</h4>
      </div>
      <div class="modal-body">
        Deseja sair do Sistema ?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
        <a class="btn btn-primary" href="<c:url value=" /logout "/>">Sim</a>
      </div>
    </div>
  </div>
</div>