jquery Bootstrap 彈出框(Popover)顯示html內容,URL,div等

實現效果:
jquery Bootstrap 彈出框(Popover)顯示html內容,URL,div等

其實有個關鍵點:

data-container="body" data-html="true" 注意下就可以了
<button type="button" class="btn btn-success" title="Popover title"  
            data-container="body" data-html="true" data-toggle="popover" data-placement="bottom" 
            data-content='

            <div id="popover-content"> <form role="form" method="post"> <div class="form-group"> <label>Start time?</label> <div class="input-group date" id="datetimepicker1"> <input type="text" class="form-control" placeholder="Start Date time of event" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div class="form-group"> <label>End time?</label> <div class="input-group date" id="datetimepicker2"> <input type="text" class="form-control" placeholder="End Date time" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div class="form-group"> <button class="btn btn-primary btn-block">Search between dates</button> </div> </form> </div>

            '>
        底部的 Popover
    </button>

要是沒加 data-container="body" data-html="true" ,那就這樣了:

jquery Bootstrap 彈出框(Popover)顯示html內容,URL,div等

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章