How to create a canvas in HTML5 that looks like a window - html

I want to create a HTML page, in which a button click will open a window dialog (a canvas that looks like a window with close and resize options). How do I go ahead creating this design. Any idea?

As per my requirements, i found solution with JQueryUI modal dialog that has re size and dragging.
Special thanks to #wisdom and #Jarrod for their help in finding me a solution.

Related

Open new page at specific size

I have rollover that when clicked opens a link (video) in a new page or tab depending on if I specify target="_blank".
Question? Can I control the width of this new (parent) page. I would like it to be ~80% smaller than the parent just to show the user that it is a separate page. Or.. How can I have this code open in a window of the existing page?
Thank you for your time
<div id="apDiv3"><img src="Rollover blankBL.png" alt="Fork at 5.7 Km stay right" width="400" height="225" id="fork 57" /></div>
As you mentioned in your own post you can use window.open read the window.open documentation for more info. You can specify many parameters about the popup. A simple popup with explicit width / height would look like this:
window.open('http://www.google.com',"My Window Name", "width=400,height=400")
I also created a plunker so you can see it in action
HOWEVER, I really advise against using this. This is the OLD way of doing things. This type of popup hasn't been popular for well over 10 years now. Outside of being annoying and unpopular it is also not dependable. Some browsers / popup blockers will totally block this window from opening.
A better alternative is to use some sort of JS modal library to load the content within the actual page (not in a new window).
One I really like is Magnific Popup they have a bunch of examples on their page.

Window resize disable in html

I created an html page within that for few links i done an pop window with width-400 and height-200.
But the clients requirements is when window got popup the user should not resize it.
I tried with resizable=no,resizable=0 but nothing is working out, all makes window resize.
Please help me if there is any alternate method.
Here is my jsfiddle link http://jsfiddle.net/uj07cf7o/7/
window.open("disclaimer.jsp", "popup", "width=400,height=200",'resizable=no');
update like this..
window.open('YOURPAGE.htm', 'popper', 'directories=no,location=no,menubar=no,toolbar=yes,status=no,scrollbars=yes,resizable=no,height=500,width=565')

HTML Open Link in New Fixed Size Window

I am trying to add a pop up confirmation window for a contact us form I am making. I want a new html page to to open up in a new window that has a fixed size and is centered in the users screen.
Ideally I would love to only use HTML/CSS but I don't know if that is even possible. If not I don't mind using Javascript or jquery if it's simpler.
Thank you!
New Page<noscript>You need Javascript to use the previous link or use New Page</noscript>

JQuery-mobile pop up/ dialog box?

I am building an app for mobiles, using jquery mobile framework. I want to be able to make a simple dialog box/pop up, so that when you click on a picture of a "question mark" the pop up/ dialog box would appear with a simple message.
I have tried different approaches from http://jquerymobile.com/test/docs/pages/dialog-alt.html to so many others. I couldnt get non of them to work. So If you know how to make a simple pop up or a simple dialog box could you please give me an example!
If you want to open a dialog in jquery mobile you have to use an attribute data-rel="dialog" and the href must point to a URL where your dialog lives:
Open dialog
Here's a fiddle so you can see how it works.
Hope it helps.
UPDATE:
It seems there's a problem with jQuery Mobile dialog and some devices.
There's an issue open in the GitHub repository.
I've found this plugin which seems to work really well.

A pop that disables parent window

I know how to show a pop-up window. But I will like to freeze or disable the parent window when there is a pop-up window active. Once the pop-up window is closed, the parent window should automatically be active again.
How exactly is it done?
You do not neet o remake the wheel.
Take a look at this page.
It's a JQuery plugin that does exactly what you ask, and much much more.
It is just my personal idea, but I would think, the solution could be when open the pop up windows, you just override the click function of the parent document to return false, and set it back to normal when they close the pop up window, some JavaScript code will need to be used here
I'm guessing you want a modal dialog box? Most of these disable the parent window by positioning an overlay... Here is a list of 22 different plugins ( you don't need to read German to use this site :P )