Question

我创建了一个bootstrap popover，其代码如下所示。现在我希望popover显示在我点击页面的任何地方。我该怎么做？

目前它出现在点击＆＃34;弹出链接＆＃34;。

上

请帮忙！

HTML：

<br>
<br>
<br>
<br>
<div class="container">
    <div class="span3">


        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="#" id="popover">the popover link</a>
        <!-- Changed the bootstrap css for popover maximum width to 800px from 276 px -->
        <div id="popover-head" class="hide"> Event | <a id="appointmentsInformationReference" href="#">Appointments</a> </div>

        <div id="popover-content" class="hide">

                <!-- form-horizontal .controls margin left changed from 180 to 0 px -->

                <form class="form-horizontal" style="margin-top: 15px">

                    <div class="control-group inline" >
                        <label class="control-label" style="width: 75px; text-align: left" for="dateAppointment">Date: </label>
                        <div class="controls pull-left" >
                            <input type="text" id="dateAppointment" placeholder="Date of Appointment">
                        </div>
                    </div>


                    <div class="control-group inline" >
                        <label class="control-label" style="width: 75px; text-align: left" for="namePatient">Name: </label>
                        <div class="controls pull-left" >
                            <input type="text" id="namePatient" placeholder="Name of Patient">
                        </div>
                    </div>

                    <div class="control-group inline">
                        <label class="control-label" style="text-align: left; width: 75px" for="locationAppointment">Where: </label>
                        <div class="controls pull-left">
                            <input type="text" id="locationAppointment" placeholder="Location">
                        </div>
                    </div>
                    <div class="control-group inline">
                        <div class="controls">
                            <button type="createAppointment" class="btn btn-block pull-left" style="width: 45%; margin-top: 10px">Create</button>
                            <button type="editAppointment" class="btn btn-block pull-right" style="width: 45%; margin-top: 10px">Edit</button>
                        </div>
                    </div>
                </form>

        </div>

        <div id="appointmentsInformationContent" class = "hide">
            <p> This is some information about the appointments </p>
        </div>
    </div>

使用Javascript：

<script>
 $(document).ready(

    $('#popover').popover({
        html : true,
        title: function() {
            return $("#popover-head").html();
        },
        content: function() {
            return $("#popover-content").html();
        },

        placement: 'top'
    }),

    $(document).on('click', '#appointmentsInformationReference', function()
    {
        alert('beep');
    })

 )

</script>

Answer 1

Bootstrap的popover放置可以是一个函数（我猜）有一个事件参数，在控制台中记录它并查看它是否包含鼠标位置坐标。

placement: function(x) {
   console.log(x);
}

如何在鼠标单击位置显示引导弹出窗口？

1 个答案: