alloalix

Is this script is closer than your idea ?

https://www.w3schools.com/code/tryit.asp?filename=FE40ATRAYOYC

In this case, you have to download : https://wordpress.org/plugins/bootstrap-modals/ and just add this code in your page :

  <button type="button" class="btn btn-info btn-lg" id="total" data-toggle="modal" data-target="#myModal">Choose options</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Choose options</h4>
        </div>
        <div class="modal-body">
          <p><input type="button" id ='one' onclick="change()" data-dismiss="modal" value="Option 1">
			<input type="button" id ='two' data-dismiss="modal" value="Option 2"></p>
        </div>
        <div class="modal-footer">
        </div>
      </div>
      
    </div>
  </div>

And then, if you can add javascript on your wordpress, i think some plugins exist like this one : https://wordpress.org/plugins/scripts-n-styles/ and you have to add :

<script>
$('#one').click(function(){
    $('#total').text('option1');
});

$('#two').click(function(){
    $('#total').text('option2');
});
</script>

I hope it’s ok for you, it’s hard to explain all the steps especially coz i’m french haha.

Is that what you want ?

http://jsfiddle.net/L6629rxt/

Can you try this in Custom CSS :

.main-navigation{display:none;}