Question

我已经创建了一个触发另一个内部模态的模态。但是内部模态中的元素（输入文本）最初不起作用。几次解雇模态后，它开始工作。当我设置不允许时：false;然后它开始冻结，没有工作。

这是代码，

<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>

Answer 1

这是因为你的第二个模态嵌套在第一个模态中。将第二个模态触发器留在第一个表单中，但在第一个模态关闭后放置第二个模态。

*注意：您在结束div代码之前错过了结束form代码。

工作示例：

$(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>

内部模态在物化css中无法正常工作

1 个答案: