Purely custom html form popup in wordpress site - html

Question

I need to display a form on my homepage (Wordpress site) in a popup. It is my own form and not a contact 7 or something else.
I want a popup plug-in or the code which can do the same on my home page.
I tried many plug-ins but some has their own form designing which does not give me feature to add my form to it.
I need a plain HTML good looking popup.

Answer 1

You can use JQuery 'dialog' to open a popup with your form.
Simply embed your form in a div with an id and convert it into a dialog.
HTML
<button type="button" id="but" >Open Popup</button>
<div id="dialogForm">
<form id="myform" method="post">
Name:
<input type="text"/><br/>
Phone:
<input type="text"/><br/>
<button type="submit"> Submit </button>
</form>
</div>
JavaScript
$('#but').click(function() {
$("#dialogForm").dialog("open");
});
$("#dialogForm").dialog({
modal: true,
autoOpen: true,
show: {effect: "blind", duration: 800}
});
JavaScript for loading the dialog on load of the homepage
Note that the 'autoOpen' is set to true.
$(window).load(function() {
$("#dialogForm").dialog({
modal: true,
autoOpen: true,
show: {effect: "blind", duration: 800}
});
});
Here's the fiddle: http://jsfiddle.net/sve3Lmje/
Fiddle for opening dialog without click: http://jsfiddle.net/sve3Lmje/1/