zzz-test

×

zzz-test

By: Alex Russell

Copy the HTML code below:

<h1>zzz-test</h1><p><strong>By: Alex Russell</strong></p><p>    <!-- Full-width container for button and image --></p>
<div class="republish-container">
        <img src="https://foothillsforum.org/wp-content/uploads/2025/03/by-nc-nd-300x105.png" alt="Republish License" class="republish-image"><br />
        <button id="openModal">Republish</button>
    </div>
<p>    <!-- Modal Structure --></p>

		/* Full-width container with styling */
		.republish-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%; /* Expands to parent container */
			background: #ccc;
			border: none;
			border-radius: 8px;
			padding: 0 15px 0 0;
		}</p>
<p>		/* Image styling */
		.republish-image {
			width: 50%; /* Image expands to 50% of the container's width */
			max-width: 250px; /* Image's max-width is 300px */
			height: auto; /* Maintain aspect ratio */
			margin-right: 10px;
		}</p>
<p>		/* Button styling */
		#openModal, #copyHtml {
			width: 100%; /* Button expands to 100% of container width */
			height: 40px; /* Button height always matches image */
			padding: 0 15px;
			background: #37b34a; /* Button color */
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}</p>
<p>		/* Hover effect for the button */
		#openModal:hover {
			background: #2a8d3a; /* Darker green on hover */
		}</p>
<p>		/* Modal Styling */
        .modal {
            display: none;
            position: fixed;
            z-index: 99999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .modal-content {
            background-color: #ccc;
            border: 1px solid #333;
            border-radius: 5px;
            padding: 20px;
            margin: 5% auto;
            width: 80%;
            max-width: 1200px;
            text-align: left;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-height: 80vh;
            overflow-y: auto;
        }
        .close {
            float: right;
            font-size: 24px;
            cursor: pointer;
        }
        textarea {
            width: 100%;
            height: 200px;
            padding: 8px;
            font-family: monospace;
            white-space: pre-wrap;
        }
    
<p>    
    document.addEventListener("DOMContentLoaded", function () {
        const modal = document.getElementById("articleModal");
        const openModalBtn = document.getElementById("openModal");
        const closeModalBtn = document.querySelector(".close");
        const copyBtn = document.getElementById("copyHtml");
        const articleHtmlTextarea = document.getElementById("articleHtml");</p>
<p>        // Open modal
        openModalBtn.addEventListener("click", function () {
            modal.style.display = "block";
        });</p>
<p>        // Close modal
        closeModalBtn.addEventListener("click", function () {
            modal.style.display = "none";
        });</p>
<p>        // Copy HTML to clipboard
        copyBtn.addEventListener("click", function () {
            articleHtmlTextarea.select();
            document.execCommand("copy");
            alert("HTML copied to clipboard!");
        });</p>
<p>        // Close modal if clicking outside of content
        window.addEventListener("click", function (event) {
            if (event.target === modal) {
                modal.style.display = "none";
            }
        });
    });
    </p>

View Our Republishing Guidelines

Foothills Forum is a 501(c)3 tax-exempt nonprofit news organization and relies solely on donations and grants from individuals, corporations and foundations. Our EIN is 52-1071448. Find our tax documents here.

Address

PO Box 153
Washington, VA 22747

Contact Us

[email protected]

(540) 987-0035

Foothills Forum stories may be republished online or in print pursuant to Creative Commons license CC BY-NC-ND 4.0. We ask that you edit only for style or length, you must provide proper attribution, and you must link to our website. Please see our full republishing guidelines regarding photos or graphics.

See Our Republishing Guidelines

Republishing Guidelines

Home
About
Our Reporting
Our Projects
- Villages of Rappahannock County
- Storytelling Contest
Stay Informed
Donate