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

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

本文介绍了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