Exit button with message

Asked

Viewed 2,061 times

1

I’m trying to use the bootstrap 3 along with the VRaptor 3 and I have a problem on the menu.

I happen to have in this menu the option "exit" and I’m lost.

I need that when the user click on "exit", open a window asking if this is really what you want and giving "ok" 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

3 answers

3

Use confirm() to get confirmation from the user, if he really wants to quit.

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

If the user presses OK the default behavior of the browser 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>

  • Thanks @Renan , but using the modal became more elegant. Your tip worked. However, I will use Gabriel’s tip ... I am trying to get the modal button to actually exit the system. rsssrr

  • 1

    Next time you detail that is to use modal.

  • thanks again for the kindness in helping me. I will detail next. Tks

1


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>
<link rel="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>


<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="#" 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>

See also on jsfiddle

  • was the way I wanted it. Just one more question. By clicking the "YES" button I have to exit the system. <button type="button" class="btn btn-primary">Sim</button> , as I put the url that after being clicked should exit the system? And I have to put this on the button... : <c:url value="/logout"/>

  • @Marciapereirareis Voce can include the tag a and just put the btn-Primary btn classes for the behavior to be the same as your exit, I edited the answer with this detail.

  • That way?: <button type="button" class="btn btn-primary" <c:url value="/logout"/> >Sim</button> ... I’m lost in it.

  • 1

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

  • I put it that way <button type="button"> <a class="btn btn-primary" href="<c:url value="/logout"/>">Sim</a></button> worked, just the button got too ugly. I’ll see how I can fix it. At least advanced enough thank you rsrsrsr

0

Follows the solution:

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

Thank you so much to everyone who helped me!

Browser other questions tagged javascript bootstrap-3

You are not signed in. Login or sign up in order to post.