Disabling the minimize and maximize buttons of a popup window is not directly supported in modern browsers, including Microsoft Edge, due to security and user-experience considerations. The window.open() function provides limited control over window behavior, and features like disabling minimize/maximize buttons are not accessible for security reasons.

However, there are some workarounds you can consider:

You can configure the popup to have a fixed size and prevent resizing or maximizing by using the resizable=no option in the window.open() call. While you cannot completely disable the minimize button, this approach reduces user control over the window’s size.

let popupWindow = null;

function openPopup() {
    const popupUrl = "PopupPage.aspx";
    const popupOptions = "width=800,height=600,scrollbars=no,resizable=no,toolbar=no,menubar=no,status=no";

    if (!popupWindow || popupWindow.closed) {
        popupWindow = window.open(popupUrl, "PopupWindow", popupOptions);
    } else {
        popupWindow.focus();
    }

    return false; // Prevent default behavior
}

Few Limitations

  • The minimize button cannot be disabled programmatically.
  • The maximize button will not function because of resizable=no, but the button might still be visible depending on the browser.
  • Modern browsers intentionally restrict such behaviors to ensure a consistent user experience and security.

Alternative is you can Simulate a Popup Using a Modal

If you need full control over the window’s appearance and behavior, consider using a modal dialog instead of window.open(). A modal is created within the parent window and does not have minimize/maximize buttons.

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
    <style>
        /* Modal styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 600px;
            background-color: white;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            border: 1px solid #ccc;
        }
        .modal-overlay {
            display: none; /* Hidden by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
    </style>
</head>
<body>
    <button onclick="showModal()">Open Popup</button>

    <!-- Modal overlay and content -->
    <div class="modal-overlay" id="modalOverlay" onclick="hideModal()"></div>
    <div class="modal" id="modal">
        <iframe src="PopupPage.aspx" style="width:100%; height:100%; border:none;"></iframe>
    </div>

    <script>
        function showModal() {
            document.getElementById("modal").style.display = "block";
            document.getElementById("modalOverlay").style.display = "block";
        }

        function hideModal() {
            document.getElementById("modal").style.display = "none";
            document.getElementById("modalOverlay").style.display = "none";
        }
    </script>
</body>
</html>

Benefits of Using a Modal

  • Complete control over the appearance and behavior.
  • No minimize/maximize buttons because it is not a browser window.
  • Fully supported in all modern browsers, including Edge.

How can I use model popup without iframe

You can create a modal popup without using an <iframe> by dynamically injecting content (e.g., HTML or ASP.NET control output) directly into the modal. This allows you to display content from the same page or even fetch content from another server-side resource using AJAX.

Steps to Create a Modal Popup Without <iframe>

  • HTML Structure for the Modal Define a hidden modal in your HTML that will be displayed when needed.
  • CSS for Styling Style the modal to make it look like a popup.
  • JavaScript for Showing and Hiding the Modal Add functionality to show and hide the modal dynamically.
  • Server-Side Content Injection (Optional) Use AJAX to fetch dynamic content from another .aspx page and display it in the modal.
<!DOCTYPE html>
<html>
<head>
    <title>Modal Popup Without iframe</title>
    <style>
        /* Modal background overlay */
        .modal-overlay {
            display: none; /* Hidden by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
            z-index: 999;
        }

        /* Modal container */
        .modal {
            display: none; /* Hidden by default */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            background-color: white;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            border-radius: 8px;
            padding: 20px;
        }

        /* Close button */
        .close-button {
            float: right;
            cursor: pointer;
            color: #aaa;
            font-size: 24px;
            margin: -10px -10px 10px 0;
        }

        .close-button:hover {
            color: black;
        }
    </style>
</head>
<body>
    <!-- Trigger button -->
    <button onclick="showModal()">Open Modal</button>

    <!-- Modal structure -->
    <div class="modal-overlay" id="modalOverlay" onclick="hideModal()"></div>
    <div class="modal" id="modal">
        <span class="close-button" onclick="hideModal()">×</span>
        <div id="modalContent">
            <!-- Content will be dynamically loaded here -->
            <p>Loading...</p>
        </div>
    </div>

    <script>
        // Show modal
        function showModal() {
            document.getElementById("modal").style.display = "block";
            document.getElementById("modalOverlay").style.display = "block";

            // Optionally load content dynamically
            loadModalContent();
        }

        // Hide modal
        function hideModal() {
            document.getElementById("modal").style.display = "none";
            document.getElementById("modalOverlay").style.display = "none";
        }

        // Load content dynamically (optional)
        function loadModalContent() {
            const modalContent = document.getElementById("modalContent");

            // Use fetch to load content from another page
            fetch('PopupPage.aspx')
                .then(response => response.text())
                .then(data => {
                    modalContent.innerHTML = data;
                })
                .catch(error => {
                    modalContent.innerHTML = "<p>Error loading content.</p>";
                });
        }
    </script>
</body>
</html>

Explanation of above code

  1. Modal Structure
    • The modal and its overlay (.modal and .modal-overlay) are initially hidden using display: none;.
    • The modal is centered using position: fixed; and transform: translate(-50%, -50%);.
  2. JavaScript Functions
    • showModal() makes the modal visible.
    • hideModal() hides the modal and overlay.
    • loadModalContent() fetches dynamic content from a .aspx page using the fetch API.
  3. Dynamic Content Loading
    • The fetch() call loads the content of PopupPage.aspx and injects it into the modal’s #modalContent element. This eliminates the need for an <iframe>.
  4. Close Button
    • The close button (×) allows the user to hide the modal.

Conclusion Points:

  • No iframe: Directly loads and displays content.
  • Customizable: Full control over modal appearance and behavior.
  • Dynamic Content: Easily fetch content from server-side resources like .aspx pages.
  • Cross-Origin Restrictions: Ensure the modal content is fetched from the same domain (or proper CORS headers are set if fetching from another domain).
  • Security: Sanitize any dynamic content to prevent XSS attacks.
  • Browser Compatibility: Modern browsers (including Edge) fully support the fetch() API. For older browsers, use a library like jQuery’s $.ajax()

Leave a Reply

Your email address will not be published. Required fields are marked *

Explore More

On click of parent page pop up window should stay on top only

To ensure the popup window stays on top of the parent page, you can use the window.open() method with specific focus-handling logic. JavaScript allows you to bring the popup window

Read More

How to remove JavaScript Objects from memory

To remove unused objects and improve memory management in JavaScript, you generally rely on the JavaScript engine’s garbage collection mechanism. However, you can aid this process by explicitly removing references

Read More

JavaScript method to remove child node

Create a JavaScript method that will take 2 parameters, first parameter will take complete XML as string and second will take XML node object which need to be removed from

Read More