[RESOLVED]modal popup form

can someone guide me on the best approach to do the following….

when a user clicks a particular link, (a PDF), a modal box pops up and shows a few form fields for the user to fill in before clicking ok, then the modal box closes, and the PDF document appears for reading/download….

Google "create pdf from asp.net".  Your question is more pdf related than modal popup related.  Doing modal popups is simple, again just google "modal pop-up asp.net" or look at the jQuery dialog plug-in.

sorry im not looking to create a PDF its just the click on the link shows a modal box first and requests the users name and email before they are able to view/download the PDF they clicked on….

Probably an idea to start here

http://jqueryui.com/dialog/

or maybe this if the above is too basic

http://fancybox.net/

Again google for "modal box asp.net" and you’ll find lots of examples already out there.

Hi mark-1961,

From your description, I suppose you want to create a dialog form with name and email field and a submit button. If that is the case, you could use jQuery dialog UI.

Here is a sample, you could refer to it.

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="js/dialog.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(function () {
                $("#dialog").dialog({
                    autoOpen: false
                });
                $("#button").on("click", function () {
                    $("#dialog").dialog("open");
                });
            });
            // Validating Form Fields.....
            $("#submit").click(function (e) {
                //...
            });
        });
    </script>
        <div class="container">
            <div class="main">
                <div id="dialog" title="Dialog Form">
                    <form action="" method="post">
                        <label>Name:</label>
                        <input id="name" name="name" type="text">
                        <label>Email:</label>
                        <input id="email" name="email" type="text">
                        <input id="submit" type="submit" value="Submit">
                    </form>
                </div>
                <h2>jQuery Dialog Form Example</h2>
                <p>Click below button to see jQuery dialog form.</p>
                <input id="button" type="button" value="Open Dialog Form">
            </div>
        </div>

More details, please refer to the following link: http://www.formget.com/jquery-dialog-form/

If you have any other questions about my reply, please let me know feely.

Best Regards,
Dillion

Leave a Reply