标签: modal-dialog

我刚开始使用新的Twitter Bootstrap版本启动一个新项目:bootstrap 3.我不能让Modal在远程模式下工作.我只是希望当我点击一个链接时,它会显示带有远程网址内容的模态.它工作但模态布局完全被破坏.

这是一个jsfiddle的链接:http://jsfiddle.net/NUCgp/5/

代码 :

<a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal title</h4>

            </div>
            <div class="modal-body"><div class="te"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

谁能让这个简单的例子有效？

我正在开发一个Android应用程序.

如何将我正在使用的自定义对话框的标题居中？

谢谢.

我目前正在研究Angular 4项目的密码重置页面.我们使用Angular Material来创建对话框,但是,当客户端单击对话框时,它将自动关闭.有没有办法避免对话关闭,直到我们的代码端调用"关闭"功能？或者我应该如何创建一个不可关闭的模态？

我当时希望使用Twitter Bootstrap Modal窗口作为局部视图.但是,我并不认为它的设计是以这种方式使用的; 它似乎意味着以相当静态的方式使用.尽管如此,我认为能够将其用作局部视图会很酷.

例如,假设我有一个游戏列表.点击给定游戏的链接后,我想从服务器请求数据,然后在"当前页面顶部"的模态窗口中显示有关该游戏的信息.

我做了一些研究,发现这个帖子类似但不完全一样.

有没有人尝试过成功或失败？任何人都有jsFiddle或他们愿意分享的某些来源？

谢谢你的帮助.

我正在寻找在ASP.NET MVC中实现模态对话框的最标准方法.

我想要做的一个例子就是当我从"列表"页面中选择一个项目时,我希望"详细信息"页面是列表上的弹出窗口而不是新页面.我不是在寻找黑客.我希望它是一个遵循ASP.NET MVC模式的解决方案.我也不希望不使用jQuery和ASP.NET Ajax(没有插件,除非它作为最佳实践出现).

我正在使用此代码,但模式太薄:

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-lg">
            <div class="modal-header modal-lg">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Solutions</h4>
            </div>
            <div class="modal-body modal-lg">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

这就是它的样子:

我怎样才能使这个模态更广泛？理想情况下,我希望它大约是宽度的两倍,因为它现在太瘦了.

我创建了一个GUI,其中我使用了JFrame.我该如何制作Modal？

我有一个a用于调用模态的元素:

<a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a>

而且,说这是我的模式:

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

我可以将函数绑定到由modal触发的事件:

$('#myModal').on('hidden', function () {
  // do something…
})

我的问题是:如何a从我的事件订阅者函数访问元素 - 它调用模态？

AJAX选项卡非常有效.这一部分非常简单.但是,获取AJAX UI对话框模式窗口以触发链接是不成功的.

任何帮助都将不胜感激.

我正在尝试使用Twitter Bootstrap将Google地图插入模式.模态显示当前地图的形状,但仅显示地图的一部分,其余为灰色.调整屏幕大小后,地图始终显示正确,但位于错误的位置.

我搜索并找到了一些建议,例如调用地图的resize事件,或者将地图图像的max-width设置为none,但这些建议都没有帮助到目前为止.似乎地图无法确定它的正确大小,只要它隐藏在一个元素中即可.

JS

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"),
    mapOptions);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.219987, 4.396237)
  });
  marker.setMap(map);
}

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <div id="mapCanvas" style="width: 500px; height: 400px"></div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

我正在使用Twitter Bootstrap v2.0.4.我需要一些帮助,因为我没有正确触发调整大小事件或编辑css,因此谷歌地图是独立的.