How to close Materialize modal only when user clicks on close btn?

Question

I want to close modal ONLY when user clicks on close button. I know, how to do this in Bootstrap. Could you help with Materialize?

Answer 1

You can customize the behavior of Materialize modal using Options which can be found Here at the bottom of the page

change option dismissible to false (which by default in modal plugin is true) so modal only get closed when click on close button.

$('.modalselector').leanModal({
      dismissible: false
);

Example Modal

$(document).ready(function(){
	$('.modal-trigger').leanModal({
		dismissible: false
	});
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>