Question

我正在尝试在Bootstrap模式中使用http://www.thepetedesign.com/demos/panorama_viewer_demo.html中的JQuery Panorama Viewer。该站点是Bootstrap v3.1.1的MVC C＃解决方案。

显示带有引脚的地图。单击一个引脚执行AJAX请求，使用Panorama Viewer将图像加载到模态中并显示它。

索引页面发出AJAX请求。

以下是索引页面上模式的HTML：

<div id="modal" class="modal fade" tabindex="-1" role="dialog"></div>

以下是索引页面上的JavaScript：

<script type="text/javascript">
    $(document).ready(function () {
        $('.pin').tooltip();
        //every time pin is clicked
        $('.pin').click(function () {
            //store id of pin in js object
            var pin = {
                id: $(this).data("id")
            };
            //perform ajax request
            $.ajax({
                //use get type
                type: 'GET',
                //use razor function to bind it to controller function
                url: '@Url.Action("GetPanaramic")',
                //attach store id object
                data: pin,
                //method ran with success
                success: function(result) {
                    $('#modal').html(result);
                    $('#modal').modal('show');
                },
                //method ran with failure
                error: function(error) {
                    $('#modal').html('<div class="modal-header">Failed to get panaramic for this pin</div>');
                }
            });
        });
    });
</script>

从索引页面的AJAX请求调用全景页面。

以下是全景页面上模式的HTML：

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">@Model.GetTitle()</h4>
        </div>
        <div class="modal-body">
            <div id="panorama">
                <img src="@Url.Content(String.Format("~/Content/img/site-plans/{0}", @Model.GetFileName()))">
            </div>
        </div>
    </div>
</div>

以下是全景页面上的JavaScript：

<script type="text/javascript">
    $("#panorama").panorama_viewer({
        animationTime: 0,
        easing: "ease",
        overlay: false,
        repeat: @Model.FullRotate.ToString().ToLower()
    });
</script>

当我加载页面时，模态内的图像始终显示：无

JQuery Panorama Viewer内部Bootstrap模式

0 个答案: