Pop up box in web form

Question

Hai Friends, I want to display pop-up box by clicking a button on web form. The pop-up box should have three text boxes and one button. When I click the pop-up button the values in the pop-up box text boxes should display on my web form.... Please provide me a solution.

sudipta sanyal · Answer

download then add in the page /*------------------POPUPS------------------------*/#fade { display: none; background: #E4E4E4; position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; opacity: .50; z-index: 9999; } .popup_block { display: none; background: #fff; padding: 10px; border: 5px solid #ddd; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } img.btn_close { float: right; margin: -40px -40px 0 0; } .popup p { padding: 5px 10px; margin: 5px 0; } /*--Making IE6 Understand Fixed Positioning--*/*html #fade { position: absolute; } *html .popup_block { position: absolute; } #fade { z-index: 0; } function newPopup() { popUp('350', 'divAdd1'); } function popUp(width, popUpID) { var popID = popUpID; var popWidth = width; //Fade in the Popup and add close button $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend(' '); //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; //Apply Margin to Popup $('#' + popID).css({ 'margin-top': -popMargTop, 'margin-left': -popMargLeft }); //Fade in Background $('body').append(' '); //Add the fade layer to bottom of the body tag. $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer return false; } function popUpClose() { $('#fade , .popup_block').fadeOut(function () { $('#fade, a.close').remove(); //Fade in Background $('#headerMessage').fadeOut(); }); } margin-left: -215px;"> color: #747879;"> Title First Name : width: 80%;"> Last Name : width: 80%;"> Mob : width: 80%;">

Pop up box in web form

Answers (1)