1
다른 내부 모달을 트리거하는 모달을 만들었습니다. 내부 모달의 요소 (입력 텍스트)가 처음에는 작동하지 않습니다. 몇 차례 모달을 기각 한 후 일하기 시작합니다. 그리고 내가 dismissible을 설정하면 : false; 그 다음 그것은 얼기 시작한다, nothings는 작용한다. 당신이 당신의 두 번째 모달이 첫 번째 모달 안에 중첩이 있기 때문에 여기내부 모달이 materialize CSS에서 제대로 작동하지 않습니다.
코드는,
<div id="modal1" class="modal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="modal-close" style="float: right;">×</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;">×</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>