css不能单独写要写在一起-Go服务器开发

好的，下面是将 CSS 和 JavaScript 代码整合在一起的版本。在这个示例中，CSS 将直接嵌入到 JavaScript 中，以便在创建模态框时一并插入。

完整代码

for (let i = 0; i < dialogData.data.attachmentList.length; i++) {
    const fileUrl = dialogData.data.attachmentList[i].fileUrl;
    const link = $('<a class="link view">').attr('href', fileUrl).text(dialogData.data.attachmentList[i].fileName);

    link.on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();

        let imageUrl = '../d/exemptionReduction/selectPictureById?id=' + dialogData.data.attachmentList[i].id;

        // 添加模态框 HTML 和 CSS
        let modalHtml = `
            <style>
                #imageContainer {
                    width: 100%;
                    height: auto;
                    display: flex;
                    justify-content: center;
                    overflow: hidden; /* 防止溢出 */
                }
                #imagePreview {
                    max-width: none; /* 允许超出容器 */
                    cursor: move;
                    transition: transform 0.2s ease; /* 添加平滑过渡效果 */
                }
            </style>
            <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div id="imageContainer">
                                <img id="imagePreview" src="${imageUrl}" alt="Image Preview">
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;

        $('body').append(modalHtml);
        $('#imageModal').modal('show');

        // Zoom functionality
        let scale = 1;

        const imgElement = $('#imagePreview');

        $('#imageContainer').on('wheel', function(e) {
            e.preventDefault();
            if (e.originalEvent.deltaY < 0) {
                scale *= 1.1; // Zoom in
            } else {
                scale /= 1.1; // Zoom out
            }
            imgElement.css('transform', `scale(${scale})`);
        });

        // Drag functionality
        let isDragging = false;
        let startX, startY;

        imgElement.on('mousedown', function(e) {
            isDragging = true;
            startX = e.pageX - imgElement.position().left;
            startY = e.pageY - imgElement.position().top;
            $(this).css('cursor', 'grabbing');
        });

        $(document).on('mouseup', function() {
            isDragging = false;
            imgElement.css('cursor', 'move');
        });

        $(document).on('mousemove', function(e) {
            if (isDragging) {
                let xPos = e.pageX - startX;
                let yPos = e.pageY - startY;
                imgElement.css({ top: yPos + 'px', left: xPos + 'px' });
            }
        });

        $('#imageModal').on('hidden.bs.modal', function () {
            $('#imageModal').remove();
        });
    });

    self.uploadImageBtn.after(link).hide();
}