1

i have created a modal which trigger another inner modal. but the element(input text) in inner modal is not working initially. after dismissing the modal few times it starts working. and when i set dismissible: false; then it starts freezing, nothings works.

enter image description here

here is code,

<div id="modal1" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="modal-close" style="float: right;">&times;</button>
      <div class="row">
        <div class="col s6" style="padding-top:25px;">
          <h6><b>Personal Details</b></h6>
        </div>
        <div class="col s6">
          <h6><b>Book Details</b></h6>
        </div>
      </div>
    </div>
    <div class="modal-body">
      <form role="form" method="post" action="thanks.php">
        <div class="row">
          <!-- personal details -->
          <div class="col s6">
            <div class="row">
              <div class="input-field col s4">
                <input placeholder="" id="FirstName" name="firstname" type="text" class="validate" style="font-size:12px">
                <label for="first_name" style="font-size:12px;"><b>First Name</b></label>
              </div>
              <div class="input-field col s4">
                <input placeholder="" id="MiddleName" name="middlename" type="text" class="validate">
                <label for="middle_name" style="font-size:12px;"><b>Middle Name</b></label>
              </div>
              <div class="input-field col s4">
                <input placeholder="" id="LastName" name="lastname" type="text" class="validate">
                <label for="last_name" style="font-size:12px;"><b>Last Name</b></label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s2">
                <input name="gender" type="radio" id="male" value="Male" />
                <label for="male" style="font-size:12px;">Male</label>
              </div>
              <div class="input-field col s2">
                <input name="gender" type="radio" id="female" value="Female" />
                <label for="female" style="font-size:12px;">Female</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s6">
                <input placeholder="" id="location" name="location" type="text" class="validate" style="font-size:12px">
                <label for="location" style="font-size:12px;">Location</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s6">
                <input placeholder="" id="email" name="email" type="email" class="validate" style="font-size:12px">
                <label for="email" style="font-size:12px;">Email</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s6">
                <input placeholder="" id="mobile" name="mobile" type="number" class="validate" style="font-size:12px">
                <label for="mobile" style="font-size:12px;">Mobile</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s6">
                <textarea placeholder="" rows="3" id="message" name="message" class="materialize-textarea" style="font-size:12px"></textarea>
                <label for="message" style="font-size:12px;">Message</label>
              </div>
              <button class="btn waves-effect waves-light" type="reset" name="reset" style="float:right;margin-left:10px;">Reset</button>
              <button class="btn waves-effect waves-light" type="submit" name="submit" style="float:right;">post
                <i class="material-icons right">send</i>
              </button>
              <a class="modal-trigger btn" href="#modal2">Second Modal</a>
            </div>
          </div>
          <div id="modal2" class="modal">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="modal-close" style="float: right;">&times;</button>
                <h6><b>Personal Details</b></h6>
              </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col s12" style="padding-top:25px;">
                    <input placeholder="" id="abc" name="abc" type="text" class="validate" style="font-size:12px">
                    <label for="abc" style="font-size:12px;">ABC</label>
                  </div>
                </div>
              </div>
            </div>
          </div>

      </form>
    </div>
  </div>
</div>
vanburen
  • 21,502
  • 7
  • 28
  • 41
Ranjank
  • 133
  • 1
  • 14

1 Answers1

0

This is because you have your second modal nested inside the first modal. Leave the second modal trigger inside your first form but place the second modal itself after the first modal is closed.

*Note: You're missing a closing div tag that goes just before your closing form tag.

Working Example:

$(document).ready(function() {
  $('.modal-trigger').leanModal();
});
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

.modal-form label,
.modal-form input {
  font-size: 12px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<div id="modal1" class="modal modal-form">
  <div class="modal-content">
    <div class="modal-header">
      <div class="row">
        <div class="col s12">
          <button type="button" class="modal-close waves-effect waves-light btn right">&times;</button>
          <h4><b>Personal Details</b></h4>
        </div>
        <div class="col s12">
          <h6><b>Book Details</b></h6>
        </div>
      </div>
    </div>
    <div class="modal-body">
      <form role="form" method="post" action="thanks.php">
        <div class="row">
          <div class="col s12">
            <div class="row">
              <div class="input-field col s12 m4">
                <input id="first_name" name="firstname" type="text" class="validate">
                <label for="first_name"><b>First Name</b>
                </label>
              </div>
              <div class="input-field col s12 m4">
                <input id="middle_name" name="middlename" type="text" class="validate">
                <label for="middle_name"><b>Middle Name</b>
                </label>
              </div>
              <div class="input-field col s12 m4">
                <input id="last_name" name="lastname" type="text" class="validate">
                <label for="last_name"><b>Last Name</b>
                </label>
              </div>
            </div>
            <div class="row">
              <div class="col s12 m4">
                <input class="with-gap" name="gender" type="radio" id="male" value="Male" />
                <label for="male">Male</label>
              </div>
              <div class="col s12 m4">
                <input class="with-gap" name="gender" type="radio" id="female" value="Female" />
                <label for="female">Female</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="location" name="location" type="text" class="validate">
                <label for="location">Location</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="email" name="email" type="email" class="validate">
                <label for="email">Email</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="mobile" name="mobile" type="number" class="validate">
                <label for="mobile">Mobile</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <textarea rows="3" id="message" name="message" class="materialize-textarea"></textarea>
                <label for="message">Message</label>
              </div>
              <button class="btn waves-effect waves-light btn" type="reset" name="reset">Reset</button>
              <button class="btn waves-effect waves-light btn" type="submit" name="action">Post
                <i class="material-icons right">send</i>
              </button>
              <br />
              <br />
              <a class="modal-trigger waves-effect waves-light btn" href="#modal2">Second Modal</a>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<div id="modal2" class="modal modal-form">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="modal-close waves-effect waves-light btn right">&times;</button>
      <h6><b>Personal Details</b></h6>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col s12">
          <input id="abc" name="abc" type="text" class="validate">
          <label for="abc">ABC</label>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
vanburen
  • 21,502
  • 7
  • 28
  • 41