This is my assessment of how Pinterest achieves it’s unique modal look and how to duplicate it. First and foremost, URL Link handling is server-side analyzed to see if the link is originating from the Pinterest site itself. That said, the Browsers URL Address Bar and History are dynamically created and not actually performed by … Read more
Setting sizes in percentages is a good option, another option is to use transform: .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } This will move the modal to 50% from top and left, and then adjust it back based upon the dimensions of the modal itself. This isn’t ideal for every … Read more
With a modal dialog, you set your application in a particular mode (a different “state” if you will), whereby only actions pertaining to that “mode” are accepted, hence preventing UI actions outside of the dialog. At Andreas’ prompting I thought I may have to dig dusty Windows API books, as often, the etymology/origin of a … Read more
I just had to solve the same problem. I wound up using the dialog widget from JQuery UI. I was able to implement this without using callbacks with the caveat that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you … Read more
Have you tried hiding it, then centering and opening it? var accessWindow = $(“#accessDiv”).kendoWindow({ actions: {}, /*from Vlad’s answer*/ draggable: true, height: “300px”, modal: true, resizable: false, title: “Access”, width: “500px”, visible: false /*don’t show it yet*/ }).data(“kendoWindow”).center().open(); from: http://www.kendoui.com/forums/ui/window/kendowindow-center-doesn-t-work-when-inside-an-iframe.aspx
Why is window.showModalDialog deprecated? From http://tjvantoll.com/2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/, In general the idea of putting a native dialog implementation into the browser was a really good idea, but window.showModalDialog was a bad implementation that is riddled with issues and poor browser support. (…) Note that (…) [a modal dialog using showModalDialog] is a full HTML document, not a … Read more
with newer versions of typescript (>v2 i believe): npm install -D @types/bootstrap Edit: As hughjdavey said in his comment, you also need the following import lines: import * as bootstrap from “bootstrap”; import * as $ from ‘jquery’;