标签: bootstrap-modal

我想将我的模态放在视口中间(中间)我试图添加一些css属性

 .modal { position: fixed; top:50%; left:50%; }   

我正在使用这个例子http://jsfiddle.net/rniemeyer/Wjjnd/

我试过了

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

我的页面中有一个模态.当我在Windows加载时尝试调用它时,它会向控制台输出一条错误:

$(...).modal is not a function

这是我的模态HTML:

<div class="modal fade" id="prizePopup" 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">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

这是我在加载窗口时运行它的JavaScript:

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

我该如何解决这个问题？

使用iOS 11 safari,输入文本框光标位于输入文本框之外.我们不明白为什么会遇到这个问题.正如您所看到的,我的焦点文本框是电子邮件文本输入,但我的光标不在其中.这仅适用于iOS 11 Safari

tabindexBootstrap 3中的属性是什么？

它的文档没有说明任何关于它们的内容,尽管它们实际上在所有模态中使用它们.

我只是发现它的使用,这并没有多说

用于键盘和辅助技术用户的可访问工具提示

对于使用键盘导航的用户,特别是辅助技术的用户,只应将工具提示添加到键盘可聚焦的元素,例如链接,表单控件或任何具有tabindex ="0"属性的任意元素.

而且我发现如果属性不是,我就无法按下esc隐藏模态tabindex-1.

• esc按键后模态关闭(使用tabindex)
• esc按键后模态没有关闭(没有tabindex)

我在模式对话框引导程序中的jQuery自动完成中有显示问题.

当我鼠标滚动时,结果不会保持附加到输入.

有办法解决这个问题吗？

在这里JsFiddle:

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

编辑 我发现了问题:

.ui-autocomplete {
  position: fixed;
  .....
}

如果模态滚动,问题仍然存在!

这里是JsFiddle/1.

我可以通过Programatically检查Bootstrap Modal当前是显示/隐藏的吗？

喜欢 bool a = if("#myModal").shown();？

我需要真/假

我有一个Boostrap Modal来选择事件.如果用户单击X按钮或模态外部,我想将它们发送到默认事件.我怎样才能捕获这些事件？

这是我的代码:

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content event-selector">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <center><h1 class="modal-title event-selector-text">Select an Event</h1><center>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                <div class="event-banner">
                    <a href="/?event=1">
                        <img src="<?php echo IMAGES_EVENT1_LOGO; ?>" width="100%">
                    </a>
                </div>
                <div class="event-banner">
                    <a href="/?event=2">
                        <img src="<?php echo IMAGES_EVENT2_LOGO; ?>" width="100%">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

正在尝试所有可能的方法,但从未成功:

    <div style="float: right">
        <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="declineModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Comment</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="form-control col-xs-12"></textarea>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger">Decline</button>
                </div>
            </div>
        </div>
    </div> 

如何使modal-body div中的textarea覆盖所有可用空间=宽度100%？

我正在将我的Modal从Bootstrap集成到另一个不使用它的站点.我看到bootstrap允许你为每个组件分离Javascript.但那CSS呢？如果我链接到bootstrap.css,整个网站将会改变.我只是想要足够的CSS来使Modal工作.(我尝试通过CSS文件,只是猜测我需要什么,但它没有用).

我需要使用Bootstrap 3模式框确认删除(是/否).我该如何创建呢？

HTML代码:

<form action="blah" method="POST">
    <button class='btn' type="submit" name="remove_levels" value="delete">
        <span class="fa fa-times"></span> Delete
    </button>
</form>