javascript - Specify options for multiple modals - Materialize -
i designing webpage 2 materialize modals. want set dismissible:false
both of them, seems work one. documentation pretty vague on how specify modal setting options for, , right works first modal. here code set dismissible option false:
$(document).ready(function () { $('.modal-trigger').leanmodal({ dismissible: false }); });
and here html modals:
<div class="row"> <div id="forgotpasswordpin" class="modal col s10 offset-s1 m8 offset-m2 l6 offset-l3"> <form name="emailform" ng-submit="submitform()" novalidate> <div class="modal-content"> <h4>forgot pin/password</h4> <span class="flow-text">send pin , password to: </span> <br /> <br /> <div class="input-field"> <input required id="email" type="text" style="font-size:175%;" name="email" ng-model="email" ng-minlength="2" ng-pattern="/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/"/> <label for="email" class="flow-text">email</label> <div ng-messages="emailform.email.$error"> <div class="red-text" ng-message="required">this field required</div> <div class="red-text" ng-message="pattern">invalid email</div> </div> </div> </div> <div class="modal-footer"> <a href="#!" id="send" text="send" ng-click="sendclick()" ng-show="emailform.$valid" class="btn btn-success waves-effect waves-light">send</a> <a class="btn disabled" ng-hide="emailform.$valid">send</a> <a href="" ng-click="cancelclick()" style="margin-right:25px;" class="blue-grey lighten-2 btn waves-effect waves-light">cancel</a> </div> </form> </div> </div> <div id="bottommodal" class="modal bottom-sheet"> <div class="modal-content"> <h4 id="successtitle">email sent</h4> <p id="successcontent"> password sent <span ng-bind="email"></span>.<br /> please allow 10 minutes email received. </p> <h4 id="errortitle">invalid email</h4> <p id="errorcontent" class="red-text"> sorry, not recognize email. please try again. </p> </div> </div>
how specify modal setting options for? in advance.
edit: main issue opening second 1 programmatically, , not anchor tag. in materialize documentation way shows set options according trigger, or anchor tag. may not able without using actual trigger.
you have initialize both modals in different calls, using different classes. doing can use different parameters each one.
$(document).ready(function () { $('.modal-trigger1').leanmodal({ dismissible: false }); $('.modal-trigger2').leanmodal({ dismissible: false }); }); //them: <a class="modal-trigger1 waves-effect waves-light btn" href="#forgotpasswordpin">modal</a> <a class="modal-trigger2 waves-effect waves-light btn" href="#bottommodal">modal</a>
Comments
Post a Comment