Question

我正在设计一个包含2个物化模态的网页。我想为它们设置dismissible:false，但它似乎只适用于一个。关于如何指定要为其设置选项的模态，文档非常含糊，现在它只适用于第一个模态。这是我将dismissible选项设置为false的代码：

$(document).ready(function () {
    $('.modal-trigger').leanModal({
        dismissible: false
    });
});

这是模态的html：

<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 and 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 is 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">
            Your password will be sent to <span ng-bind="email"></span>.<br /> Please allow up to 10 minutes for the email to be received.
        </p>

        <h4 id="errorTitle">Invalid Email</h4>
        <p id="errorContent" class="red-text">
            Sorry, we do not recognize that email. Please try again.
        </p>
    </div>
</div>

如何指定我为哪个模态设置选项？提前谢谢。

编辑：我的主要问题是我以编程方式打开第二个，而不是使用锚标记。在Materialise文档中，它显示设置选项的唯一方法是根据触发器或锚标记。所以如果不使用实际触发器，我可能无法做到。

Answer 1

你只需要使用不同的类在不同的调用中初始化两个模态。这样做可以为每个参数使用不同的参数。

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

Answer 2

我知道这是在不久前被问过的，但也许其他人也有类似的问题。

如果您使用OP所列出的模态选项，则在用于打开模态的函数内部，它将起作用。

例如：

  $('#bottomModal').openModal({
    dismissible: false
  });

指定多个模态的选项 - 实现

2 个答案: