Bootstrap 实例 - 弹出框（Popover）插件

@{
ViewData[“Title”] = “Home Page”;
}

<div class="container" style="padding: 10px 50px 10px;">
    <button type="button" class="btn btn-default" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="left"
            data-content="左侧的 Popover 中的一些内容">
        左侧的 Popover
    </button>
    <button type="button" class="btn btn-primary" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="top" data-html="true"
            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>'>
        top部的 Popover
    </button>

    <button type="button" class="btn btn-primary" title="Popover title"
            data-toggle="popover2" 
                 >top部的 Popover
    </button>
    <button type="button" class="btn btn-success" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="bottom"
            data-content="底部的 Popover 中的一些内容">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="right"
            data-content="右侧的 Popover 中的一些内容">
        右侧的 Popover
    </button>
</div>
<script>
    $(function () {
        $("[data-toggle='popover']").popover();
    });
</script>

<script>
    $(function () {
        $("[data-toggle='popover2']").popover({

        //    trigger: 'manual',
            container: 'body',
            placement: 'top', //top, bottom, left or right
            html: true,
            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>'


        });
    });
</script>