CODEWITHSUNDEEP
javascriptjquerymodal-dialogmaterialize
santhosh
santhosh

Reputation: 2008

MaterializeCSS modal is opened without any click event

I have used the same example from materializecss modal.

The problem here modal is opened before the click event from anchor.

<a class="modal-trigger" href="#modal1">Specialization</a>
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div></div>

I have added the JavaScript code :

$(document).ready(function(){
      // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
      $('.modal-trigger').leanModal({
          dismissible: true, // Modal can be dismissed by clicking outside of the modal
          opacity: .5, // Opacity of modal background
          in_duration: 300, // Transition in duration
          out_duration: 200, // Transition out duration
      });
});

1st image is where modal opens up before the modal-trigger event 1st image is where modal opens up before the modal-trigger event 2nd image on click event of modal-triger

enter image description here

Upvotes: 2

Views: 6201

Answers (2)

Clay Banks
Clay Banks

Reputation: 4581

A bit late on this post, but I wanted to include that you should:

  • Be using the latest version of Materialize
  • use the modal() function to initialize your modal without automatically opening it

From the documentation for Example:

 $(document).ready(function(){
     $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      inDuration: 300, // Transition in duration
      outDuration: 200, // Transition out duration
      startingTop: '4%', // Starting top style attribute
      endingTop: '10%', // Ending top style attribute
      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
          alert("Ready");
          console.log(modal, trigger);
      },
     complete: function() { alert('Closed'); } // Callback for Modal close
   });
});

Upvotes: 1

Shehary
Shehary

Reputation: 9992

Can't reproduce the described problem Fiddle

modal is opened before the click event from anchor

$(document).ready(function() {
  $('.modal-trigger').leanModal({
    dismissible: true,
    opacity: .5,
    in_duration: 300,
    out_duration: 200,
  });
});
<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">Specialization</a>
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
</div>

Unless you have following $('#modal1').openModal(); in JS file or somewhere in page which opens the modal on page load / DOM ready Fiddle

$(document).ready(function() {
  $('#modal1').openModal();
});
<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">Specialization</a>
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
</div>

Upvotes: 0

Related Questions