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模态代码）你有一个模态类的固定位置，它围绕图像（即触发模态的锚点，而不是模态本身）。这导致它们全部显示在同一个地方。

错误的代码：

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

删除位置属性，你应该没事。

Modal Popup不适用于Mobile

1 个答案: