Question

问题是我点击按钮或外部按钮，弹出窗口应该隐藏。仅在按钮单击时可见弹出窗口。我该如何解决这个问题？

 <!--This is the main code for the login form:-- -->
        <body>
            <div class="container">
              <div class="col-md-2">

                <button class="btn btn-primary dropdown-toggle" style="" data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body" type="button" data-html="true" href="#" id="login">Login</button>
              <ul class="list-unstyled">
                <div id="popover-content" class="hide">
                  <form class="form-inline" role="form">
                    <div class="form-group">
                      <select class="form-control">
                        <option>NA</option>
                        <option>RU</option>
                        <option>EU</option>
                        <option>SEA</option>
                      </select> 
                      <input type="email" placeholder="Email Id e.g. xyz@gmail.com" class="form-control">
                      <button type="submit" class="btn btn-primary">Go To Login »</button>                                  
                    </div>
                  </form>
                </div>
              </ul>
            </div>
            </div>
<!--this is the jquery code for popover-->
            <script>
                $("#login").focusin(function(){
                $("[data-toggle=popover]").popover({
                html: true, 
                content: function() {
                      return $('#popover-content').html();
                    }
            });
            });
            $("#login").focusout(function(){
                $('#popover-content').addClass("hide");
            });
            </script>
        </body>

Answer 1

查看以下代码

＆＃13;

$('[data-toggle="popover"]').popover();

$('html').on('click', function (e) {
    //only buttons
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
    //buttons and icons within buttons
    /*
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('[data-toggle="popover"]').length === 0
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
    */
});

＆＃13;

body {
  
  padding: 20px;
	background: #eaeaea;
  }
.bs-example {
	background: #fafafa;
}

＆＃13;

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="bs-example tooltip-demo">
    <div class="bs-example-tooltips">
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. " data-original-title="" title="">Popover on top <i class="glyphicon glyphicon-upload"></i></button>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. " data-original-title="" title="">Popover on bottom</button>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. " data-original-title="" title="">Popover on right</button>
    </div>
</div>

＆＃13;

单击按钮上的弹出式登录表单

1 个答案: