Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<link rel="stylesheet" href="//www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.3.20.1/jquery.colorbox-min.js"></script>
</head>
<body>
​
<form method="post" id="pform" action="">
  
  <h2>the parent form</h2>
  
  Field One: 
  <input type="text" name="fieldone" value="" placeholder="type some stuff here and click the button" style="width:300px">
  
  <br>
  
  <button id="modal-ctrl">Click here to see more field options</button>
  
  <div style="border:1px solid black;">
    <p>there is hidden stuff in here</p>
​
    <div style="display:none">
      <div id="modal-stuff">
        <h2>the modal</h2>
        <p>the stuff in here will be placed back into the parent form when the modal is closed, 
          preserving everything</p>
        Field Two 
        <input name="fieldtwo" type="text" value="" placeholder="type stuff here" style="width:300px">
        <br><br>
        radio stuff: 
        <label><input type="radio" name="radio-stuff" value="YES"> Yes</label>
        <label><input type="radio" name="radio-stuff" value="NO"> No</label>
        <br><br>
        <button class="modal-close">Done/Close Modal</button>
    </div>
   </div>
​
  </div>  
​
  <input type="submit">
  
</form>
<script>
  $(function(){
    
    $("#modal-ctrl").colorbox({inline:true, width:"50%", height:"400px", href:"#modal-stuff"});
    
    $('.modal-close').bind('click', function(){
      $.colorbox.close();
    });
    
    
    $('#pform').bind('submit', function(){
      alert($(this).serialize());
      return false; // for testing purposes
      
    });
  });
</script>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers