Question

我在模态中创建了一个链接，用于打开第二个模态。我想调整打开的第二个模态，但我不知道如何。我希望第二个模态几乎全屏，第一个保持小。这是我的代码：

<div class="modal fade" id="aboutModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="myModalLabel">Example</h3>
      </div>
      <div class="modal-body">


<button type="button" class="astext" data-toggle="modal" data-target="#myModal6">Information</button></br></br>

<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Bissa</h4>
    </div>
    <div class="modal-body">
      <p>Information</p>
      </div>
     </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>

Answer 1

我改变了很多你的代码，这很有效。 JSFiddle如下。 JSFiddle的大模态比我在我的机器上本地运行时更大。你可以获得分辨率和百分比而不是像素的乐趣。：）

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index40</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .firstOneStaySmall {
            width: 240px;
            height: 240px;
        }

        .secondOneBig {

            width: 1250px;
            height: 900px;
        }

        .positionTheDialog {
            position: fixed;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <a data-toggle="modal" data-target="#aboutModal4">
        Launch outer modal
    </a>
    <div class="modal fade" id="aboutModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content firstOneStaySmall">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title" id="myModalLabel">Example</h3>
                </div>
                <div class="modal-body">

                    <button type="button" class="astext" data-toggle="modal" data-target="#myModal6">Information</button></br></br>

                    <div class="modal fade" id="myModal6" role="dialog">
                        <div class="modal-dialog positionTheDialog">
                            @*modal-lg*@
                            <div class="modal-content secondOneBig">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Bissa</h4>
                                </div>
                                <div class="modal-body">
                                    <p>Information</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

如何在点击后调整模态内的模态？

1 个答案: