どのようにしてモーダルを拡張し、私に追加のフォームを与えるボタンを作ることができますか？ （HTML）

Question

私はこの

とHTMLパートIは、別のボタンを作りたい、私はやりたい何

     <input type="hidden" name="InterviewId" data-bind="value: selectedInterview().id" /> 
         <div class="form-group"> 
          <label>Cover Page Notes</label> 
          <textarea name="CoverPageNotes" class="form-control" maxlength="415"></textarea> 
         </div> 
         <div> 
          <!-- ??? create the interviewScheduleJson, use knockout data-binding --> 
          <input type="hidden" name="InterviewScheduleJson" /> 
         </div> 
         <div> 
          <label> 
           <input type="checkbox" name="IncludeCoverPage" value="true" checked /> 
           <input type="hidden" name="IncludeCoverPage" value="false" /> 
           Include Cover Page 
          </label> 
         </div> 
         <div> 
          <label> 
           <input type="checkbox" name="IncludeCandidateSummary" value="true" checked /> 
           <input type="hidden" name="IncludeCandidateSummary" value="false" /> 
           Include Candidate Summary 
          </label> 
         </div> 
         ... 

非常に単純に見えるようになりますモーダルを持っています"Cover Page Notes"と "Include Cover Page"の間にモーダルを拡張し、新しい入力フォームを提供します。そのため、おそらくのようなもの：

は、どのように私は、モーダルを拡張するボタンを作り、私の追加のフォームを与えることができますか？

Answer 1

UIは次のようなものになります。 xtended divには、オリジナルの<form>（あなたはそのようなフォームの詳細を提供していないので、私が詳しく説明することはできません）と相補的なフィールドが含まれます。

var xtend = function() { 
 
    document.getElementById('xtended').style.display = 'block'; 
 
}

<style> 
 
    #xtended { 
 
     display:none; 
 
    } 
 
    .button { 
 
     display: inline-block; 
 
     margin-bottom: 0; 
 
     text-align: center; 
 
     vertical-align: middle; 
 
     cursor: pointer; 
 
     border: 1px solid black; 
 
     white-space: nowrap; 
 
     padding: 0.3em; 
 
     background-color:#eee; 
 
     border-radius:3px; 
 
    } 
 
</style> 
 
<input type="hidden" name="InterviewId" data-bind="value: selectedInterview().id" /> 
 
         <div class="form-group"> 
 
          <label>Cover Page Notes</label> 
 
          <textarea name="CoverPageNotes" class="form-control" maxlength="415"></textarea> 
 
         </div> 
 
         <div class="form-group"> 
 
          <div id="xtended"> This is the extended part with other stuff in it</div> 
 
          <div class="button"><span onclick="xtend();">Extend</span></div> 
 
         </div> 
 
         <div> 
 
          <!-- ??? create the interviewScheduleJson, use knockout data-binding --> 
 
          <input type="hidden" name="InterviewScheduleJson" /> 
 
         </div> 
 
         <div> 
 
          <label> 
 
           <input type="checkbox" name="IncludeCoverPage" value="true" checked /> 
 
           <input type="hidden" name="IncludeCoverPage" value="false" /> 
 
           Include Cover Page 
 
          </label> 
 
         </div> 
 
         <div> 
 
          <label> 
 
           <input type="checkbox" name="IncludeCandidateSummary" value="true" checked /> 
 
           <input type="hidden" name="IncludeCandidateSummary" value="false" /> 
 
           Include Candidate Summary 
 
          </label> 
 
         </div>