漂亮的模态 - 如何触发一个模式没有一个按钮 [英] Nifty Modal - how to trigger a modal without a button

查看:343
本文介绍了漂亮的模态 - 如何触发一个模式没有一个按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这个脚本提供真棒模式转变,我想使用它们替代标准警报消息。

This script provides awesome modal transitions and I want to use them instead of a standard alert message.

现在的脚本演示了如何通过$ P $引发他们pssing一个<按钮> ,但我有一个小麻烦找出如何显示作为模式的结果 if语句例如

Now the demo of the script shows how to trigger them by pressing a <button>, but I am having a little trouble finding how to display a modal as a result of an if statement for example.

这是一个链接到该按钮的code。

This is the code that is linked to the button.

//这部分是在其中导入到HTML文件,其中的按钮是其他文件。

//This part is in an other file which is imported into the html file where the button is.

$(document).ready(function(){
    $(".md-trigger").modalEffects();
}); 

//该功能被触发时,按钮具有一流的,但我需要它的工作类独立的,或者至少它可以用它链接到一个按钮

//The function is triggered when a button has the class, but I need it work class independent, or at least that it can be triggered with it being linked to a button

<button data-modal="modal-1" data-toggle="modal" data-target="#mod-warning" type="button" class="md-trigger btn btn-warning btn-flat"><i class="fa fa-warning"></i> Warning</button>

问:我如何触发漂亮模式作为if语句的结果。

Question: How do I trigger the nifty modal as a result of an if statement?

推荐答案

您可以在类MD-秀添加到您正在使用的模态对话框

you can add the class "md-show" to the div element that you are using as the modal dialog

DIV例如:

<div class="md-modal colored-header" id="div_modal">
    <div class="md-content">
        <div class="modal-header">
        </div>
        <div class="modal-body form">
        </div>
        <div class="modal-footer">
        </div>
     </div>
</div>
<div class="md-overlay"></div>

如果你正在使用jQuery

if you are using jQuery

根据ID查询div元素动态添加类

query the div element by id to dynamically add the class

$("#div_modal").addClass("md-show");

要关闭该模式只是删除该类

To close the modal just remove that class

$("#div_modal").removeClass("md-show");

我希望帮助

这篇关于漂亮的模态 - 如何触发一个模式没有一个按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆