时间戳

首页 > 解决方案 > 我正在尝试使用 html 在灯箱中包含一个表单

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

问题描述

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

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

我正在使用这个功能

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 张图片，并且当我使用 Lightbox 功能时，当我点击它时它工作得非常好。

我想打开它，图片显示在右侧，表单显示在左侧，带有一些选项和按钮。

问题是，有可能吗？

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

标签： javascripthtmlcssformslightbox

解决方案

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

推荐阅读