Member Avatar for malatamil

i need two popup box like this.

<div class="pro_img">
<img src="web_img/IGN-GRAND.png" alt="Project Image" width="211" height="162" border="0">
<a href="#" onclick="popup('popUpDiv')"><br>
DOWNLOAD</a>
</div>



<div id="popUpDiv" style="display: none;">
<a href="#" onclick="popup('popUpDiv')"><div id="rokbox-close"></div></a>
<div id="rt-popup" style="background-color:rgba(230, 224, 224, 0.59);">
      <div class="rt-block">
        <div class="module-title">
          <h3 class="title">Download Brochure</h3>
        </div>
        <div id="k2ModuleBox85" class="k2LoginBlock">
 <form name="form1" onsubmit="javascript:return Validate();" action="downloadpdf.php" method="post">
             <fieldset class="input">
              <p id="form-login-username">
                <input id="modlgn_username" value="Name:" name="name" class="inputbox" size="18" onblur="if(this.value == '') { this.value='Name:'}" onfocus="if (this.value == 'Name:') {this.value=''}" type="text" style="background-color:rgba(230, 224, 224, 0.59);">
              </p>
               <p id="form-login-username">
                <input id="modlgn_username" value="E-mail:" name="email" class="inputbox" size="18" onblur="if(this.value == '') { this.value='E-mail:'}" onfocus="if (this.value == 'E-mail:') {this.value=''}" type="text" style="background-color:rgba(230, 224, 224, 0.59);">
              </p>
               <p id="form-login-username">
                <input id="modlgn_username" value="Phone:" name="phone" class="inputbox" size="18" onblur="if(this.value == '') { this.value='Phone:'}" onfocus="if (this.value == 'Phone:') {this.value=''}" type="text" style="background-color:rgba(230, 224, 224, 0.59);">
              </p>
               <!--<p id="form-login-remember"><textarea size="18" name="enquiry" rows="" value="Message:" onblur="if(this.value == '') { this.value='Message:'}" onfocus="if (this.value == 'Message:') {this.value=''}"></textarea></p>-->

              <input name="Submit" class="submit" value="Submit" type="submit">
            </fieldset>

          </form>
        </div>
      </div>
    </div>
    </div>

if i click that download button it will display popup box with text fields,after fill these details click submit button pdf file start to download. same like i want one more popup box in same page with same fields. add another popup code its not working.

downloadpdf.php

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded_ign_1.pdf"');

// The PDF source is in original.pdf
readfile('IGN GRAND_1.pdf');
?>
  • 2 Contributors
  • 1 Reply
  • 221 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by nadiam
Member Avatar for nadiam

maybe .dialog() can help you out.

or sometimes i use overlay/dialog(css)
example:

<css>
.overlay
{
    position: fixed;
    top: 0;right: 0;
    bottom: 0;left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    opacity: .15;
    filter: alpha(opacity=15);
    -moz-opacity: .15;
    z-index: 101;
    display: none;
}
.dialog
{   display: none;
    position: fixed;
    width: 350px;
    height: auto;
    top: 50%;
    left: 50%;
    margin-left: -190px;
    margin-top: -100px;
    background-color: Beige;
    border: 2px solid Black;
    padding: 0px;
    z-index: 102;
    font-family: Verdana;
    font-size: 10pt;
}
<js>


<script type="text/javascript">
$(document).ready(function ()
{
      $("#add_event").click(function (e)
      {
         ShowDialog(false);
         e.preventDefault();
      });
      $("#closec").click(function (e)
      {
         HideDialog();
         e.preventDefault();
      });
});
   function ShowDialog(modal)
   {
      $("#overlay").show();
      $("#dialog").fadeIn(300);
      if (modal)
      {
         $("#overlay").unbind("click");
      }
      else
      {
         $("#overlay").click(function (e)
      {
      HideDialog();
    });
}
}

   function HideDialog()
   {
      $("#overlay").hide();
      $("#dialog").fadeOut(300);
   } 
</script>



<html>

<input type="submit" id="add_event">
<div class="overlay" id="overlay"></div>
<div class="dialog" id="dialog">
    <input type="text" name="ename"/>
    <input type="text" name="datestart"/>
    <input type="text" name="dateend"/>
    <input type="text" name="evenue"/>
    <input type="submit" name="submit"/>
    <input type="submit" name="cancel" value="Cancel" />
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.