Nifty Modal - 如何在没有按钮的情况下触发模态 | 如何在没有按钮的情况下触发模态

如何在没有按钮的情况下触发模态

关注(28)粉丝(399)

Nifty Modal - 如何在没有按钮的情况下触发模态

本文介绍了Nifty Modal - 如何在没有按钮的情况下触发模态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这个脚本提供了很棒的模态转换，我想用它们代替标准警报留言.

现在脚本的演示展示了如何通过按下 <button> 来触发它们，但是我在寻找如何通过 显示模式时遇到了一些麻烦if 语句 例如.

这是链接到按钮的代码.

//这部分在导入按钮所在的html文件的另一个文件中.

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

//当按钮具有类时会触发该功能，但我需要它独立于工作类，或者至少可以通过将其链接到按钮来触发

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

问题:如何作为 if 语句的结果触发漂亮的模态?

解决方案

您可以将类md-show"添加到用作模态对话框的 div 元素

div 示例:


<div class="md-content"><div class="modal-header">
<div class="modal-body form">

<div class="modal-footer">

<div class="md-overlay"></div>

如果你使用 jQuery

通过id查询div元素动态添加类

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

要关闭模态只需删除该类

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

希望能帮到你

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

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.

This is the code that is linked to the button.

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

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

解决方案

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

div example:

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

if you are using jQuery

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");

I hope that helps

这篇关于Nifty Modal - 如何在没有按钮的情况下触发模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-15 13:12