问点击后如何调整modal内modal的大小？
EN

Stack Overflow用户

提问于 2017-04-12 23:37:16

回答 1查看 231关注 0票数 0

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

<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>

modal-dialog

javascript

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2017-04-14 07:06:49

我对你的代码做了很多修改，这是可行的。下面的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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43373966

复制

相似问题

问点击后如何调整modal内modal的大小？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问点击后如何调整modal内modal的大小？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问点击后如何调整modal内modal的大小？
EN