我正在尝试使用 html 在灯箱中包含一个表单

Question

我正在做一个项目，根据侧面显示的图片select 一些选项。这些选项是关于尺寸、颜色...

基本上，我试图在灯箱上显示图片（工作正常），但我试图在图片旁边放置一个带有一些选项和操作按钮的表单的白色背景。当我尝试这样做时，它实际上无法正常工作。

我正在使用这个功能

var placeImage = function(x) {
var img="";
for (var counter = 0; counter <= x; counter++ ) {
     img += '<a href="https://source.unsplash.com/1000x80'+counter+'.jpg" data-lightbox="roadtrip"><img class="img-responsive gallery__img" src="https://source.unsplash.com/1000x80'+counter+'.jpg" alt="" />';
}
    document.getElementById("placing_img").innerHTML = img;
};
placeImage(10);

HTML

<div id="placing_img"></div>

它在我的画廊中显示了 11 张图片，并且由于我正在使用灯箱功能，所以当我点击它时它工作得非常好。

我想打开它，右边是图片，左边是表格，有一些选项和按钮。

问题是，这可能吗？

谢谢，我正在努力学习更多关于 CSS、HTML 和 JS 的知识。我还是初学者。

Answer 1

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .some-page-wrapper {
            margin: 10px;
            padding: 10px;
            /* background-color: red; */
        }

        .row {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
        }

        .column {
            display: flex;
            flex-direction: column;
            padding: 10px;
            flex-basis:100%;
            flex: 1;
        }
    </style>
</head>
<body>
    <div class='some-page-wrapper' id="placing_img">
    </div>
</body>
<script>
    var placeImage = function(x) {
// var img="";
for (var counter = 0; counter <= x; counter++ ) {
    // '<a href="https://source.unsplash.com/1000x80'+counter+'.jpg" data-lightbox="roadtrip">
     img = '<img class="img-responsive gallery__img" src="https://source.unsplash.com/1000x80'+counter+'.jpg" alt="" style="height: 100%; width: 100%; object-fit: contain"/>';
    var h = `<div class='row'>
            <div class='column'>
                ${img}
            </div>
            <div class='column'>
                <form style="background-color:yellow; height: 100%;">
                    <input type=text>
                    <button>button${counter}</button>
                </form>    
            </div>
        </div>`;    
        document.getElementById("placing_img").innerHTML += h;
}
    
};
placeImage(10);
</script>
<html>

我正在尝试使用 html 在灯箱中包含一个表单

I'm trying to include a form in a lightbox using html

html

javascript

css

forms

lightbox