jQuery效果无法在Bootstrap模式关闭类上运行

时间：2017-10-12 18:57:03

标签： jquery twitter-bootstrap

我想做什么？

我正在尝试在打开模态和关闭模式时实现自己的效果，而不是使用Bootstrap fade类。

有什么问题？

我可以在打开模态时添加我的效果，但是当在关闭类上关闭模态时我没有做同样的事情。

HTML：

<!-- Navigational Bar -->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="navbarToggle">
        <span class="sr-only">Toggle navigation</span>
        <span ><i class="fa fa-list fa-2x"></i></span>
    </button>

    <div class="container" id="responsiveContainer">

        <!-- Title -->
        <div class="navbar-header pull-left">
            <a class="navbar-brand" href="{% url 'index' %}"> abc </a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" id="nav">
                <li id="nav-form">
                    <form class="navbar-form">
                        <div class="form-group">
                            <input type="text" id="searchBox" class="form-control">
                            <button id="search" type="submit" class="btn btn-default"><span>  <i class="fa fa-search"></i> </span></button>
                        </div>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="#" id="authentication" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-arrow-circle-down"></i> Sign In/Up </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" data-target=".signupModal" data-toggle="modal" id="signup"><i class="fa fa-user-plus"></i> Sign Up </a></li>
                        <li><a href="#" data-target=".loginModal" data-toggle="modal" id="signin"><i class="fa fa-sign-in"></i> Sign In </a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-left" id="nav">
                <li><a href="{% url 'articles' %}"><i class="fa fa-list-alt"></i> Article </a></li>
                <li><a href="{% url 'contact' %}"><i class="fa fa-phone"></i> Contact </a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Login Modal -->

<div class="modal loginModal" dat-backdrop="false" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"> <i class="fa fa-sign-in fa-5x"></i></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="inputUserName"><i class="fa fa-user-o"></i> Username </label>
                        <input class="form-control" type="text" placeholder="&#xf040; Username" style="font-family:Arial, FontAwesome" id="inputUserName">
                    </div>
                    <div class="form-group">
                        <label for="inputPassword"><i class="fa fa-asterisk"></i> Password</label>
                        <input class="form-control" type="password" placeholder="&#xf040; Password" style="font-family:Arial, FontAwesome" id="inputPassword">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="login"> Login </button>
            </div>
        </div>
    </div>
</div>

jQuery的： 

// This works
$('#signin, #signup').click(function() {

        var $name = $(this).attr('data-target');
        $($name).fadeIn("Slow");
});

// This doesn't
$('.modal .close').click(function() {

        var $parent = $(this).parent().parent().parent().parent();
        var $this = $parent.attr('class').split(' ')[1];
        $($this).fadeOut("Slow");
});

2 个答案:

答案 0 :(得分：0)

如果您将变量替换为您指定的类loginModal，则查询将类似于$("loginModal")。您的网页中没有<loginModal></loginModal>，这就是它失败的原因。为了解决这个问题，我会给按钮提供一个.loginModal类，或者在你淡出的地方给我 $("." + $this).fadeout("Slow");看起来像$(".loginModal")。但是，这将选择页面中带有loginModal类的所有元素。这就是我要做的事情：

JavaScript：

// this works 
$('#signin, #signup').click(function() {
    var $name = $(this).data("target")
    $($name).fadeIn("Slow");
});
// this now does
$('.modal .close').click(function() {
    var modal = $(this).parents("div.modal");
    $(modal).fadeOut("Slow");
});

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="navbarToggle">
        <span class="sr-only">Toggle navigation</span>
        <span><i class="fa fa-list fa-2x"></i></span>
    </button>

    <div class="container" id="responsiveContainer">

        <!-- Title -->
        <div class="navbar-header pull-left">
            <a class="navbar-brand" href="{% url 'index' %}"> abc </a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" id="nav">
                <li id="nav-form">
                    <form class="navbar-form">
                        <div class="form-group">
                            <input type="text" id="searchBox" class="form-control">
                            <button id="search" type="submit" class="btn btn-default"><span>  <i class="fa fa-search"></i> </span></button>
                        </div>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="#" id="authentication" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-arrow-circle-down"></i> Sign In/Up </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" data-target="#loginModal" data-toggle="modal" id="signup"><i class="fa fa-user-plus"></i> Sign Up </a></li>
                        <li><a href="#" data-target="#loginModal" data-toggle="modal" id="signin"><i class="fa fa-sign-in"></i> Sign In </a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-left" id="nav">
                <li><a href="{% url 'articles' %}"><i class="fa fa-list-alt"></i> Article </a></li>
                <li><a href="{% url 'contact' %}"><i class="fa fa-phone"></i> Contact </a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Login Modal -->

<div id="loginModal" class="modal" dat-backdrop="false" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"> <i class="fa fa-sign-in fa-5x"></i></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="inputUserName"><i class="fa fa-user-o"></i> Username </label>
                        <input class="form-control" type="text" placeholder="&#xf040; Username" style="font-family:Arial, FontAwesome" id="inputUserName">
                    </div>
                    <div class="form-group">
                        <label for="inputPassword"><i class="fa fa-asterisk"></i> Password</label>
                        <input class="form-control" type="password" placeholder="&#xf040; Password" style="font-family:Arial, FontAwesome" id="inputPassword">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="login"> Login </button>
            </div>
        </div>
    </div>
</div>

如果你决定使用我的JavaScript，signupModal必须被赋予signupModal和loginModal的id，但是id为loginModal。这样，jQuery选择器就不会错误地选择不正确的元素或多个元素。不幸的是，我不能这样做，因为这需要bootstrap。

答案 1 :(得分：0)

我终于找到了修复程序，现在是：

我从模态关闭按钮中删除了HTML中的data-dismiss属性，并改变了jQuery代码，如下所示：

$('#signin, #signup').click(function() {

    var $name = $(this).attr('data-target');
    $($name).fadeIn("Slow");
});

$('.modal .close').click(function() {

    var $this = "#" + $(this).parents("div.modal").attr('id');

    $($this).fadeOut("Slow");

    setTimeout(function(){
        $($this).modal('hide');
    }, 500);
});
相关问题
最新问题