相关疑难解决方法(0)

当我在页面中触发模态视图时,它会触发滚动条消失.这是一种恼人的效果,因为当模态移入/消失时,背景页面开始移动.这种效果有治愈方法吗？

如何open / enlarge使用jquery/js而不是数据属性在模态中创建图像？

每当用户将图像插入到内容编辑器中时,我需要它可以单击以使用js扩展为模式,因此我不能依赖用户输入他们不知道如何使用的数据属性.

我试过了:-

<a href="/myImage.png" id="pop">
    <img src="/myImage.png" style="width: 400px; height: 264px;">
    Click to Enlarge
</a>

jQuery :-

$("#pop").on("click", function() {
   $(this).modal();
});

我是否需要向jquery添加信息以传递图像源以显示在模态中？

谢谢!!!

我在网站上使用bootstrap datepicker,它也通过给它的父级固定位置设置为粘性,它正常工作但在Ipad和Iphone上测试它(尚未在andriod设备上测试),当我向下滚动时尝试触摸日期选择器打开它,它滚动回到页面顶部,我该如何解决这个问题？

当我使用自定义下拉列Selectric时出现类似的问题

我创建了这个问题的一个简单的条纹下来的版本在这里.请注意,问题不会在模拟器上复制,而是在实际的移动设备或ipad上复制.

单击触发Twitter Bootstrap Modal弹出窗口的链接会导致浏览器向上滚动页面.此行为仅发生在Chrome中.

这是一个演示页面:

http://www.turizmburosu.com/test2.aspx

该页面有600行链接,导致页面正文超过窗口高度.如果单击这些链接中的任何一个,则会显示模式对话框.在Chrome中,点击初始视图下方的任何链接都会导致后台页面向上滚动(并非总是向上滚动).

我使用以下函数来触发模态的显示:

function test(id, imp) {
    $("#modalLabel").html("Header");
    $("#modalBody").html("Body");
    $("#myModal").modal("show");
}

和链接的形式:

<a href="" onclick="test();return false;">Test Link ###</a>

我在Chrome 22.0.1229.94 m中看到了这种行为.

关于为什么会发生这种情况的任何建议/想法以及如何预防？

附加示例

这可以在Modal插件的Twitter Bootstrap文档页面上重新创建.

进入页面后,只需覆盖现有的data-api即可使用JavaScript api:

$('#modals a[data-toggle="modal"]').on('click',
  function(e) {
    $('#myModal').modal('toggle');
    return false
  });

现在,如果单击" 启动演示模式"按钮,则在显示模式时页面将向上滚动.

同样,这是使用Chrome.

当我打开一个模态窗口时,它会将背景上下文一直滚动到顶部.示例我在页面底部有打开模态窗口的链接.当我点击链接时,窗口将向上滚动到文档的顶部,然后显示模态窗口.我对模态窗口的定位没有任何问题.我只是不希望在打开页面之前向上滚动.我主要使用来自BS v3的默认CSS(最新的github)和几乎默认的模态体.我正在使用JS填充模态的标签和正文然后打开它

<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body" id="myModalBody"></div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->