2个自举模态，具有最大宽度和最大高度

Question

我想在bootstrap主题网页中创建2个模态。

我完成了更广泛的模式的创作。

这是代码，

.modal-dialog {
    width: auto;
    height: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width:900px;
}

使用此代码的更宽模态的输出是我所期望的。

但问题现在是较小的模式。

较小的模态应该是响应式的。 它的最大宽度应为360px，最大高度为340px。

我应该更改较小模式的.modal-dialog css吗？

Answer 1

您可能想要创建默认模式的新变体以迎合不同的尺寸和行为：

.modal-dialog {
  &.modal-wider {
    width: auto;
    height: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width: 900px;
  }

  &.modal-smaller {
    width: auto;
    height: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width:360px;

    .modal-body {
        max-height: 340px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
  }
}

place = {
name1:[-33.8650, 151.2094],
name2:[59.3293, 18.0686]
};

var id,circle,center;

function panMap() {
    id=this.getAttribute('id');
    center=place[id];
    map.panTo(center);
    circle = L.circle(center,500000, {
                 color: 'red',
                 fillColor: '#f03',
                 fillOpacity: 0.5
                 }).addTo(map);
    console.log("zoom = " +map.getZoom());
};

// center of the map
var center = [29,29];

// Create the map
var map = L.map('map').setView(center, 3);

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);
  
var classname = document.getElementsByTagName("button");
for (var i=0;i<classname.length;i++) {
    classname[i].addEventListener("click", panMap, false);  
};

Answer 2

您可以尝试这样的事情（没有引导程序）：

HTML：

<div class="modal-dialog">
    <div class="modal-dialog-small">
        Lorem ipsum dolor sit amet...
    </div>
</div>

CSS：

.modal-dialog {
    width: auto;
    height: auto;
    position: fixed;
    text-align: center;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    max-width:900px;
    background: red;
}

.modal-dialog-small {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: left;
    background: blue;
    max-width: 360px;
    max-height: 340px;
    margin-top: 50vh;
    transform: translateY(-50%);
}

Fiddle JS link

Danny H的答案比我的更完整。