Question

我想在Bootsrap pop-over中显示一个sig-in表单，它在现代浏览器中工作正常。我的问题是我编写了一个Jquery函数来为IE9添加占位符。该功能未应用于弹出元素。

请告诉我如何访问弹出元素。

<!DOCTYPE HTML>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
    <style> 

    .form-control {width:120px;}
    .popover {max-width:400px;}
    .popper-content {
      display:none;
    }
    </style>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"> </script>
    </head>
    <body>

    <a class="popper" data-toggle="popover"  data-placement="bottom" id="search">Pop me</a>

        <div  class="popper-content" id="popover-content" class="hide">
            <div >
                <div class="well">
                  <form role="form">
                    <div class="form-group">
                      <label class="control-label">E-Mail</label>
                      <input class="form-control" id="inputSuccess1" placeholder="hello@example.com" type="text">
                    </div>
                    <div class="form-group">
                      <label for="inputPassword" class="control-label">Passwort</label>
                      <input class="form-control" id="inputSuccess2" placeholder="******" type="password">
                    </div>
                    <div class="form-group">

                      <button type="button" class="btn btn-primary btn-block">Login</button>

                    </div>

                    <div class="row">
                      <div class="col-xs-6 col-md-8">
                        <div class="checkbox">
                          <label>
                            <input checked="checked" type="checkbox"> Remember me
                          </label>
                        </div>
                      </div>
                      <div class="col-xs-6 col-md-4">
                        <button type="button" class="btn btn-link  pull-right small">Help</button>
                      </div>
                    </div>
                  </form>
              </div>
            </div>
        </div>


    <script>
    $(function ()  
    {
    $("[data-toggle=popover]").popover({
        html: true, 
        content: function() {        
              return $('#popover-content').html();
            }
    });


    });
    </script>

    </div>


    <script src="js/bootstrap.min.js" type="text/javascript"> </script>
    </body>

    <script>
     jQuery(function() {
        jQuery.support.placeholder = false;
        test = document.createElement('input');
        if('placeholder' in test) jQuery.support.placeholder = true;
        });

        // Placeholder for IE
        $(function {
            if(!$.support.placeholder) { 

                var active = document.activeElement;
                $(':text, textarea, input[type="password"]').focus(function () {
                    if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                        $(this).val('').removeClass('hasPlaceholder');
                    }
                }).blur(function () {
                    if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                        $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                    }
                });
                $(':text, textarea, input[type="password"],input[type="password"]').blur();
                $(active).focus();
                $('form').submit(function () {
                    $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
                });
            }  

        });
    </script>

    </html>

Jquery没有使用bootstrap Popover元素

0 个答案: