Question

我正在实现一个使用Modal作为确认对话框的Bootstrap HTML应用程序，它可能是另一个模式。例如，我打开模态，然后单击该模态上的某些内容，第一个将被隐藏，并打开另一个模态。

从Bootstrap 3.3.6开始，他们支持自动添加边距，并隐藏垂直滚动条，但是一旦打开第二个模态，滚动条就不会消失，如果我关闭再打开这些模态多次，保证金权利将从17px增加到17x2px，17x3px ......

我不知道如何使用Bootstrap模式解决这个问题，或者任何解决方法，我也在考虑只保留1个模态的Angular，并更改模态内容（包括标题，正文和页脚），每个模态将在一个单独的HTML模板中引入，angular将为每个模态加载一个特定的模板，但我对使用Angular的这些变通方法没有多少经验。

以下是我为我的问题创建的示例页面，页面内容很长，有Open Modal按钮，点击打开第一个模态，然后点击Open Second Modal以关闭第一个模式并打开第二个。若你多次这样做，你可以看到右边缘增加了，右边有一条白线。

http://plnkr.co/edit/iUuWaSvgDcaKQPTp1Yb2?p=preview

Answer 1

你已经在一次点击上编写了数据关闭和数据目标，这没有错，但是内部bootstrap模式有一个动画函数需要花费自己的时间（appx 500ms）。所以如果你通过jqyery控制它会更好。

见下面的代码。

$SPARK_HOME/bin/spark-submit --class com.github.spark.App spark-scala-assembly-0.0.1.jar

模态方法已集成在您使用的bootstrap.js中。因此它不会显示在运行时发生的余量。

Answer 2

您可以轻松使用样式表根据自举模式显示一次进入另一个自举模式。

    <html>
    <head>

       <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
      <body>
        <button type="button" class="btn btn-primary" id="myBtn">Click here</button>

      <div class="modal fade modal-admin" id="myModal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <button type="button" class="btn btn-primary" id="modelbtn">Click here</button>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
          
        </div>
      </div>
      
     <div class="modal fade " id="myModal1" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
              <button type="button" id='close' class="btn btn-default" data-dismiss="modal" ng-click=''>Close</button>
            </div>
          </div>
          
        </div>
      </div>
    </body>
    <script>
    $(document).ready(function(){
        $("#myBtn").click(function(){
            $("#myModal").modal();
        });
    });
    $(document).ready(function(){
        $("#close").click(function(){
            $('.modal-admin').css('width', '500px');
        });
    });
      
      $(document).ready(function(){
        $("#modelbtn").click(function(){
             $('.modal-admin').css('width', '200px');
             
             $("#myModal1").modal();
             $('#myModal1').css('margin-left', '200px');
                                 
        });
    });
    </script>
    </html>

Bootstrap模态在第二个开启模态

2 个答案: