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

Question

Upon visiting specific websites, I want the extension to display a modal that contains text and an image. So far I've managed to create a blank box that comes up, but I'm struggling to figure out how to style it using HTML and CSS. Any tips would be greatly appreciated.

This is all from the content.js file:

    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

Maybe something like this?

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 output:

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

Toggle the.show class to show/hide the modal.