css - 模态弹出窗口不适用于移动设备

Question

我正在使用模态弹出窗口显示图像 here

正如您所观察到的，弹出窗口非常适合桌面设备，但在移动设备上它们只是一个接一个地堆叠。

我使用的代码基本上搜索所有图像标签并向图像添加类模态

 private function convertString($text, $replace_str) {
    $pos = strpos($replace_str, 'src=');
    $pos_start = strpos($replace_str, '"', $pos + 1);
    $pos_end = strpos($replace_str, '"', $pos_start + 1);
    $image_str = substr($replace_str, $pos_start + 1, $pos_end - $pos_start - 1);
    $new_str = '<a class="modal" href="'.$image_str.'">'.$replace_str.'</a>';
    $return_str = str_replace($replace_str, $new_str, $text);
    return $return_str;
}

我哪里错了？

Answer 1

问题是(首先，这不是 Boostrap 模态代码)模态类有一个固定位置，它环绕在图像周围(即触发模态的 anchor ，而不是模态本身)。这导致它们都显示在同一个地方。

错误代码:

.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
}

删除 position 属性，你应该没问题。