如何创建模态弹出框 - Google Chrome 扩展

Question

在访问特定网站时，我希望扩展程序显示一个包含文本和图像的模式。到目前为止，我已经设法创建了一个出现的空白框，但我正在努力弄清楚如何使用 HTML 和 CSS 设置它的样式。任何提示将不胜感激。

全部来自 content.js 文件：

    const modal = document.createElement('dialog');
modal.setAttribute("style", "height:40%", "background:#000000");
modal.innerHTML =
       `<iframe id="headlineFetcher" style="height:50%"></iframe>
        <div style="position:absolute; top:0px; left:5px">  
            <button>x</button>
            
        </div>`;
document.body.appendChild(modal);
const dialog = document.querySelector("dialog");
dialog.querySelector("button").addEventListener("click", () => {
    dialog.close();
 });
dialog.showModal();

Answer 1

也许是这样的？

CSS：

.modal {
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  height: 100vh;
  justify-content: center;
  position: absolute;
  width: 100vw;
}
.modal.show {
  display: flex;
}
.modal-dialog {
  align-self: center;
  background: #fff;
  border-radius: 2px;
  position: absolute;
  max-height: 300px;
  width: 600px;
}
.modal-dialog .modal-content {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  max-width: 100%;
}
.modal-dialog .modal-content .modal-header,
.modal-dialog .modal-content .modal-body,
.modal-dialog .modal-content .modal-footer {
  align-self: stretch;
  flex: 0 1 40px;
}
.modal-dialog .modal-content .modal-header {
  background: #F2F2F2;
  border-bottom: 1px solid #C0C0C0;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #333;
  padding: 0.5rem;
}
.modal-dialog .modal-content .modal-header .close {
  background: transparent;
  border: none;
  border-radius: 40%;
  cursor: pointer;
  height: 20px;
  outline: none;
  position: absolute;
  right: 8px;
  top: 10px;
  width: 20px;
}
.modal-dialog .modal-content .modal-body {
  flex-grow: 1;
  min-height: 220px;
  overflow-y: auto;
  padding: 0.5rem;
}
.modal-dialog .modal-content .modal-footer {
  background: #F2F2F2;
  border-top: 1px solid #C0C0C0;
  padding: 0.5rem;
  text-align: right;
}
.modal-dialog .modal-content .modal-footer button {
  border: 1px solid #C0C0C0;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 4px;
  outline: none;
  padding: 5px 6px 4px 6px;
  transition: all 0.5s ease-in-out;
}
.modal-dialog .modal-content .modal-footer button:hover {
  border-color: #444;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

JavaScript：

const oModal = function () {
    this.show = _show;
    this.addButton = _addButton;

    /**
     * Opens a modal dialog
     * @param {string} title The dialog title text
     * @param {string} content The content that should be shown in the modal dialog
     * @param {string} buttons A list of buttons that should be shown. If no buttons are added, the modal dialog footer will not be shown.
     */
    function _show(title, content, buttons) {
        if (title === '') { title = 'Please add a title'; }

        var html = '';
        html += '<div class="modal" tabindex="-1">\n';
        html += '    <div class="modal-dialog" role="document">\n';
        html += '        <div class="modal-content">\n';
        html += '            <div class="modal-header">\n';
        html += '                <button type="button" class="close"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>\n';
        html += '                <h4 class="modal-title">' + title + '</h4>\n';
        html += '            </div>\n';
        html += '            <div class="modal-body">' + content + '</div>\n';

        if (buttons != '' && typeof buttons !== 'undefined') {
            html += '            <div class="modal-footer">' + buttons + '</div>\n';
        }

        html += '            </div>\n';
        html += '        </div>\n';
        html += '    </div>\n';
        html += '</div>\n';

        const container = document.getElementById('ModalContainer')
        container.innerHTML = html;
        container.querySelector('.modal').classList.add('show');
    }

    /**
     * Builds a buttons for use in modals
     * @param {string} id
     * @param {string} text
     * @param {Function} onclick
     * @param {boolean} close
     */
    function _addButton(id, text, onclick, close) {
        var b = document.createElement('button');

        // attributes
        if (close) { b.setAttribute('data-dismiss', 'modal'); }
        if (id !== '') { b.setAttribute('id', id); }
        if (onclick !== '') { b.setAttribute('onclick', onclick); }

        b.innerText = text;

        return b.outerHTML;
    }
};
const objModel = new oModal();
let modalButtons = '';
modalButtons += objModel.addButton(
    'BtnOK',
    'OK',
    'btnOK()',
    false
);
modalButtons += objModel.addButton(
    'BtnCancel',
    'Cancel',
    'btnCancel()',
    true
)

objModel.show(
    'Modal title here...',
    `
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
<p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
    `,
    modalButtons
);

function btnOK() {
    alert('You clicked the OK button...')
}

function btnCancel() {
    alert('You clicked the Cancel button...')
}

HTML 输出：

<div class="modal show" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Modal title here...</h4>
            </div>
            <div class="modal-body">
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
                <p>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</p>
            </div>
            <div class="modal-footer"><button id="BtnOK" onclick="btnOK()">OK</button><button data-dismiss="modal" id="BtnCancel" onclick="btnCancel()">Cancel</button></div>
        </div>
    </div>
</div>

切换 .show 类以显示/隐藏模式。