Question

我在标题页上添加了此对话框

<div class="navbar-custom-menu" style="float:right">
  <ul class="nav navbar-nav">
    <li class="dropdown user user-menu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <img src="img/images.png" class="user-image" alt="User Image" width="30px">
        <span class="hidden-xs"><?php echo $user; ?></span>
      </a>
      <ul class="dropdown-menu" style="width:250px;margin-left:-83px;">
        <li class="user-header" style="margin-left:0px;min-height:139px;background-color:#3c8dbc">
          <br />
          <center>
            <img src="img/images.png" class="img-circle" alt="User Image" width="80px">
            <p><?php echo $user; ?></p>
          </center>
        </li>
        <li class="user-footer" style="margin-left:0px">
          <div class="pull-left" style="margin-left: 8px; margin-top: 10px;">
            <a href="#" class="btn btn-default btn-flat">Profile</a>
          </div>
          <div class="pull-right">
            <?php
            if ($user) {
              $menuItems[] = '<li>'
                  . Html::beginForm(['/site/logout'], 'post')
                  . Html::submitButton(
                      'Logout', ['class' => 'btn btn-default btn-flat', 'style' => 'margin-right: 15px;']
                  )
                  . Html::endForm()
                  . '</li>';
            } else {
              $menuItems = [
                ['label' => 'Login', 'url' => ['/site/login']],
              ];
            }

            echo Nav::widget([
              'options' => ['class' => 'navbar-nav navbar-right'],
              'items' => $menuItems,
            ]);
            ?>
          </div>
        </li>
      </ul>
    </li>
    <!-- Control Sidebar Toggle Button -->
    <li>
      <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
    </li>
  </ul>    
</div>

并添加JQuery用于隐藏和显示对话框登录注销对话框，在此代码中只有在点击class =“dropdown user user-menu”后才隐藏和显示，但在点击身体时不隐藏

jQuery的（文件）。就绪（函数（）{

jQuery(".user-menu").click(function(){
    jQuery(".dropdown-menu").toggle();

});    
});

Answer 1

我在切换后添加此代码，然后在点击正文后隐藏登录，注销对话框

jQuery(document).ready(function(){
jQuery(".user-menu").on('click',function(){
   jQuery(".dropdown-menu").toggle();
});

jQuery(document).on("click", function(event){

                var $trigger = jQuery(".user-menu");

                if($trigger !== event.target && !$trigger.has(event.target).length){

                    $(".dropdown-menu").slideUp("fast");

                }            

            });       
  });

Answer 2

我使用此代码来隐藏popoup ..可能这会帮助你..

/ *隐藏popover-x弹出窗口* /

<div class="custombtn">

  your code 

</div>




  <?php 
                                $this->registerJs("$(document).ready(function() {
                                    $('.custombtn').click(function(e) {
                                        $('popover').toggle();
                                        e.stopPropagation();
                                    });
                                    $(document).click(function(e) {
                                        if (!$(e.target).is('.popover')) {
                                            $('.popover').hide();
                                        }
                                    });
                                });");

?>

如何在点击主体时隐藏登录注销dailog框

2 个答案: