相关疑难解决方法(0)

我需要叠加显示在第一个模态上方,而不是在后面.

$('#openBtn').click(function(){
	$('#myModal').modal({show:true})
});

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          <br>
          <br>
          <br>
          <br>
          <br>
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" …

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

这是我的场景:我正在打开一个带有一些记录细节的模态窗口,我有一个"删除"按钮.当用户点击此按钮时,我需要在现有模态上方/上方显示"确认"模式(询问"你确定吗？"),但是当显示此确认模式时,它不会首先阻止"详细信息"莫代尔(后面).

有谁知道我该怎么做？

谢谢!

我有一个页面,其中一个Bootstrap模态打开另一个模态.

问题在于,每个打开的模态都会增加

<div class="modal-backdrop fade in"></div>

到HTML代码.这对第一个很好,但是因为它就opacity: .5;会使每个模态打开时页面变暗.有没有办法检查是否modal-backdrop已经存在并且在这种情况下不打开另一个？

我打开我的模态

<a href="" data-target="#modal_01" data-toggle="modal">Modal</a>

或者使用jQuery:

$('#modal_01').modal('show');

非常感谢对此问题的任何帮助!

这里有一个方便您的小提琴:https://jsfiddle.net/zsk4econ/1/

我想在Twitter Bootstrap中处理两个不同的模态对话框.

所以我的想法是,我只需复制模态对话框HTML并创建一个新按钮(BTN2) data-toggle="modal2".点击新按钮(BTN2),第二个模态对话框应显示,而不是第一个.

我点击BTN2尝试了它,但没有出现任何对话框.但是,在现有按钮(BTN1)上,两个对话框都会显示出来.

这是当前的模态对话框.是的,它基于bootstrap.com提供的示例,因此是bs-example-modal-lg类.

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="PodcastModal" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <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>
             <ul class="nav nav-tabs" role="tablist" id="list"></ul>
         </div>
         <div class="modal-body">
            <div id="items"></div>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-primary" data-dismiss="modal">Done!</button>
         </div>
      </div>
   </div>
</div>

这是调用模态对话框的按钮.

<div class="btn-group">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
    <span class="glyphicon glyphicon-plus"></span> <span class="hidden-xs">Add</span>List</button>
</div>

我正在使用Vue.js 2.1.10和Bootstrap 3.3.7来显示打开另一个模式对话框的模式。每个模式对话框都包含在不同的组件中。在第一个组件内部，有对第二个组件（select-travler）的引用。

根据Bootsrap文档，我必须通过监听事件来设置焦点shown.bs.modal。将焦点设置在第一个模态中包含的输入控件上非常有用。问题：当模态在另一个模态之上时，这种方式不起作用。

第一个模态组件如下所示：

<template>
    <div ref="tripEdit" class="modal fade" role="dialog">
        <!-- Inbeded component -->
        <select-travler ref="selectTravler"></select-travler>
        <!-- /Inbeded component -->

        <div class="modal-lg modal-dialog">
            <div class="modal-content">
                <div class="modal-body container form-horizontal">

                    <div class="form-group">
                        <label for="travler_name" class="control-label">
                            Travler's name
                        </label>
                        <input id="travler_name" ref="travler_name"
                            v-model="travler_name"/>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data () {
            return {
                travler_name: null,
            }
        },

        methods: {
            show (operationType) {
                $(this.$refs.tripEdit).modal('show');

                let that = this;
                $(this.$refs.tripEdit).on('shown.bs.modal', …