Bootstrap样式JQuery / Java弹出框

Question

我有一个过滤器框，当您单击过滤器图标时会显示该过滤器框，但这是非引导程序样式。我正在使用Bootstrap3 HTML5升级网站。

目前，过滤器图标如下所示

但我们希望它的样式为：

我的代码在下面是旧的样式，但我还没有考虑到样式Jquery / Java

document.getElementById('<%:cell.ColumnIdentifier%>_link').addEvent('click', function()
    {
        if(filterPopUp == null){}
        else
        {
            filterPopUp.hide();
        }
        filterPopUp = new StickyWin.PointyTip("Add filter for <%:cell.Value %>", "<%= String.Format("Values from <input id='{0}_from' name='{0}_from' value='{1}'/> &nbsp;to <input id='{0}_to' name='{0}_to' value='{2}'/><br/><div style='text-align:right !important;margin-right:0px;margin-top:5px;'><input type='button' onclick='SubmitForm(this, \\\"filter\\\");' id='{0}' name='{0}' value='Apply' style='margin-right:10px;background-color:#CCCCCC;text-align:center !important;' class='greyButton89'/><input type='button' onclick='SubmitForm(this, \\\"clear\\\");' id='{0}' name='{0}' value='Clear' class='greyButton89' style='background-color:#CCCCCC;text-align:center !important;'/></div>", cell.ColumnIdentifier, defaultMin, defaultMax)%>", {
        point: 'up',
        pointyOptions: { theme: 'light' },
        relativeTo: '<%:cell.ColumnIdentifier%>_img'
        });

        return false;
    });

我用来做模拟的代码是：

 <div class='col-sm-4 hidden-xs'>
        <div class='panel panel-default'>
            <div class='panel-heading'>
                <h3 class='panel-title'>Add filter for Test</h3>
            </div>
            <div class='panel-body'>
                <div class='form-group'>
                    <label class='col-sm-5 control-label'>Amount from</label>
                    <div class='col-sm-7'>
                        <div class="input-group">
                            <span class="input-group-addon">£</span>
                            <input type="text" class="form-control">
                        </div>
                </div>
                </div>
                <div class='form-group'>
                    <label class='col-sm-5 control-label'>Amount to</label>
                    <div class="col-sm-7">
                        <div class="input-group">
                            <span class="input-group-addon">£</span>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                </div>
                <div class='form-group pull-right'>
                    <div class='col-sm-12'>
                        <button type='button' class='btn btn-default'>
                            <span class='glyphicon glyphicon-ok'></span> Apply
                        </button>
                        <button type='button' class='btn btn-default'>
                            <span class='glyphicon glyphicon-remove'></span> Clear
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

第一个问题可以吗？

第二个问题，如果是，怎么做？

由于

安东尼

Answer 1

试试这个，但是也许必须将一些代码移动到附加了这个弹出窗口的页面元素，你可以发布附加了这个弹出窗口的相关html代码吗？

document.getElementById('<%:cell.ColumnIdentifier%>_link').addEvent('click', function()
    {
        if(filterPopUp == null){}
        else
        {
            filterPopUp.hide();
        }
        filterPopUp = new StickyWin.PointyTip("<div class='col-sm-4 hidden-xs'><div class='panel panel-default'><div class='panel-heading'>                 <h3 class='panel-title'>Add filter for  <%:cell.Value %></h3>             </div>", "<%= String.Format(" <div class='col-sm-4 hidden-xs'>         <div class='panel panel-default'>                          <div class='panel-body'>                 <div class='form-group'>                     <label class='col-sm-5 control-label'>Amount from</label>                     <div class='col-sm-7'>                         <div class='input-group'>                             <span class='input-group-addon'>£</span>                             <input type='text' class='form-control' id='{0}_from' name='{0}_from' value='{1}'>                         </div>                 </div>                 </div>                 <div class='form-group'>                     <label class='col-sm-5 control-label'>Amount to</label>                     <div class='col-sm-7'>                         <div class='input-group'>                             <span class='input-group-addon'>£</span>                             <input type='text' class='form-control' id='{0}_to' name='{0}_to' value='{2}'>                         </div>                     </div>                 </div>                 <div class='form-group pull-right'>                     <div class='col-sm-12'>                         <button type='button' class='btn btn-default' onclick='SubmitForm(this, \\\"filter\\\");' id='{0}' name='{0}'>                             <span class='glyphicon glyphicon-ok'></span> Apply                         </button>                         <button type='button' class='btn btn-default' onclick='SubmitForm(this, \\\"clear\\\");' id='{0}' name='{0}' value='Clear'>                             <span class='glyphicon glyphicon-remove'></span> Clear                         </button>                     </div>                 </div>             </div>         </div> </div>      ", cell.ColumnIdentifier, defaultMin, defaultMax) %>", {        point: 'up',
        pointyOptions: { theme: 'light' },
        relativeTo: '<%:cell.ColumnIdentifier%>_img'
        });

        return false;
    });