Enhance the visibility of pop-ups across all pages

I'm currently working on a feature to maximize my popup, specifically an iframe. Here is the JQuery code I am using for this functionality:

$(document).ready(function(){

  $('#"+btnMaximiza.Id+"').click(function(){

    $('#"+btnMaximiza.Id+"').hide();
    $('#"+btnMinimiza.Id+"').show();

    $('.os-internal-Popup', window.parent.document).attr('style', 'top: 0px!important');
    $('.os-internal-Popup', window.parent.document).css('left','0px');
    $('.os-internal-Popup', window.parent.document).css('z-index','5000');
    $('.os-internal-Popup', window.parent.document).width('100%');
    $('.os-internal-Popup', window.parent.document).height('100%');

  });

});

The issue I am facing is that the height of the popup does not expand to cover 100% of the page. This can be seen in the image below:

https://i.sstatic.net/ULPn3.png

javascriptjquerycssiframepopup

Answer №1

    /* Styling for Popup Iframes */
.os-internal-Popup.os-internal-ui-dialog iframe {
    border-radius: 4px;
}

/* Customizing Popups */
.os-internal-Popup .os-internal-ui-dialog,
.os-internal-Popup.os-internal-ui-dialog {
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) !important;
    max-height: 95%; /* Fixing the height of iframe */
    min-width: 300px;
    overflow: visible !important;
}

body.desktop .os-internal-Popup .os-internal-ui-dialog,
body.desktop .os-internal-Popup.os-internal-ui-dialog {
    min-width: 500px;
}

div.os-internal-Popup .os-internal-ui-dialog,
div.os-internal-Popup.os-internal-ui-dialog {
    background-color: #fff;
    border: none;
    border-radius: 4px;
    position: fixed;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-content,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-content {
    max-height: 100%; /* Fixing the height of iframe content */
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
    color: #fff;
    font-weight: 600;
    left: 20px;
    margin: 0;
    top: 10px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
    background: url(/OutSystemsUIWeb/img/PopupCloseWhite.png?14311) no-repeat;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all .3s ease;
    width: 20px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover {
    opacity: .7;
    transform: rotate(90deg);
}

Answer №2

This CSS declaration was the key to solving my issue.

min-height: 100%;

Answer №3

If you want to specify the dimensions using viewport units, you can follow these steps:

$('.os-internal-Popup', window.parent.document).height('100vh');
$('.os-internal-Popup', window.parent.document).width('100vw');

vh: Represents view height and vw: Represents view width.

To learn more about CSS units, you can visit this article here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Data string not being converted correctly to date format

Here is a table I am currently working with: ID DateColumn 1 3/7/2019 5:29:38 AM 2 3/8/2019 5:28:38 AM 3 3/7/2019 5:30:38 AM 4 3/7/2019 5:31:38 AM The date column in this table is being processed as a string when bound to the grid. To ...

javascriptjqueryangulartypescriptdate

Is it possible to make the `<body>` element respect the offset (i.e. the user's current scroll position) when the 'custombox' modal is triggered?

I'm currently facing an issue with the scroll bars in the browser while using custombox.js in combination with BS4. Let me provide some context: I am working with a Custombox modal, which is similar to a BS4 modal. When a modal is opened in BS4, a c ...

jqueryhtmlcssbootstrap-4

Adding double quotes to arrays in D3.js after using the .map method

Here is the code snippet I am working with: d3.csv("static/data/river.csv", function(data) { var latlongs = data.map(function(d) { return [d.Lat,d.Lng]; }) var lineArray1 = latlongs; console.log(lineArray1); When I view the outpu ...

javascriptarraysd3.js

When hovering over a thumbnail, create a transition effect on both the thumbnail itself and the associated H

I've been struggling with this problem for a few days now. My goal is to achieve a similar effect to what is on this website: I want to highlight a link when the mouse hovers over a thumbnail, with a transition effect. I think it has something to do ...

jqueryhtmlcsscss-transitions

Why does JSON.parse need to be run twice - once for a string and once for an object?

When I send a JSON string via websocket (Socket.io) from a Node.js server to a client's browser, I find that I have to execute the JSON.parse function twice in order to extract an object from the received JSON string. This behavior is confusing to me. ...

javascriptjsonparsingwebsocket

ng-change not firing when selecting from ng-options list

I am struggling with this code snippet <select ng-model="trabajadores.orderSelected" ng-options="excel for excel in trabajadores.csv.result[1]" ng-change="console.log('changed')"> </select> Despite my best ...

javascriptangularjsng-options

Combining server-side and client-side routing in AngularJS: A comprehensive guide

Currently, I am in the process of transitioning a project to an Angular-based Single Page Application (SPA). The project is originally built using node/locomotivejs and serves templates from the server side. Due to its large size, we are converting it to A ...

javascriptnode.jsangularjsrouteslocomotivejs

Troubleshooting why content set to a <div> element with JavaScript / jQuery is not persisting after a

This is the current code snippet I am working with: <asp:Button ID="btnSave" runat="server" OnClick="Save" CssClass="StylizedButton" resourcekey="btnSave" /> <div id="lbltot"></div> Below is the JavaScript portion of the code: $(do ...

javascriptjqueryasp.net

Attempting to implement firebase configuration within my Vue component

Edit: I made an error here ^^ !https://i.sstatic.net/0QGRx.png firebase.js?5b23:11 Uncaught TypeError: app.database is not a function at eval (firebase.js?5b23:11) at Object../src/components/firebase/firebase.js (app.js:3496) at __webpack_require__ (app.j ...

javascriptfirebasevue.js

Instructions on viewing the queue of files in dropzone and uploading them sequentially

I am currently using dropzone.js to upload a multitude of images through drag and drop. To customize the upload process, I have set autoProcessQueue to false. My main concern now is figuring out how to get a list of the selected images in the queue for u ...

jqueryfile-uploaddrag-and-dropdropzone.js

Setting a single value for several identifiers within a JSON object

I'm new to JSON and I'm curious if it's possible to have a name/value pair with multiple names. Essentially, I want to be able to search for either name and retrieve the same value without having to update the value in two different places. ...

javascriptjson

Conditional statement that includes Node.js scheduling function

I am currently working on a Node.js project and I need to execute a specific portion of conditional code after waiting for five minutes since the last piece of code executed. This action should only happen once, not on a daily basis or any other frequency. ...

javascriptnode.jscron

What is the best way to extend this dropdown menu to span the entire width of the page?

My Bootstrap 5 megamenu needs all the dropdown menus to span the entire page width and be in the same position, similar to this page. How can I make the dropdown menus larger? Which Bootstrap class should I modify? I've attempted to make changes, bu ...

htmlcssbootstrap-5navbar

How to use VueJS to detect changes in a value and trigger animations

Within my Vue.js application, I am looking to incorporate animations for a number/value that changes dynamically based on data retrieved from the Vuex store. Although I have managed to initiate the animation successfully, I am encountering an issue where ...

javascriptvue.jsvuejs2

Deciphering a PHP json_encode response using JavaScript

Consider this scenario where I am using json_encoding for my array and displaying it: $key = $this->key; $sql = "SELECT * FROM Requests"; $result = $this->db->query($sql); ...

javascriptphpjson

AJAX Response: No data available

I am currently attempting to retrieve data from a SQL server and showcase it on a webpage using [WebMethod] by following this tutorial. However, I have customized the data and logic for my own use. Objective - To display the count of incidents based on Pr ...

c#jqueryasp.netsql-serverajax

Error message: "Unassigned value in knockout.js"

Here is my code snippet for binding to a textbox: var CategoryViewModel = { categoryModel: ko.observable({ categoryId: ko.observable(), categoryName: ko.observable(), active: ko.observable() }), GetCategoryById: functio ...

javascriptjqueryknockout.jsknockout-mapping-pluginknockout-3.0

How to utilize $(this) with different selectors in JQuery?

Similar Query: Jquery multiple selectors with this Can $(this) be used with multiple selectors? I attempted: $('#helper').click(function() { $(this + " #divname").html()); }); Unfortunately, it never seems to work. My goal is to ensure tha ...

jquery

Decoding the Mystery: What Do the + and # Symbols Mean in Angular 4 Routes?

Check out the repository at https://github.com/AngularClass/angular-starter https://i.sstatic.net/ITi80.png I noticed the use of + and # for referencing within loadChildren and naming conventions in the folder... After consulting the Angular documentati ...

javascriptangulartypescript

WordPress having trouble rendering the stylesheet code

I am facing an issue with Wordpress where my CSS file is not loading properly. The stylesheet contains a rule to center the header image, but for some reason it's not working. I've also tried adding a margin-left of 100px, but that doesn't s ...

csswordpress