© 2023. lead alliance.
All Rights Reserved.

Form Modals


Bsp eines Modals mit Accordion, Textbox, Inputbox und Toggleswitch


<div class="modal">
<div class="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Promotion bearbeiten/erstellen</h3>
        <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
      </div>
    <div class="modal-body">

    <input type="text" class="form-control mg-b-20" placeholder="Promotion Name">
      
    <div class="accordion-primary mg-b-25">
    <span>
      <a v-b-toggle.collapse-1 class="swap" variant="primary">Deutsch</a>
    </span>
    <b-collapse visible id="collapse-1" class="">
      <div class="row">
        <div class="col-12">
          <input type="text" class="form-control mg-y-15" placeholder="Überschrift">
        </div>
        <div class="col-12">
          <textarea id="textinput" rows="10" name="en[text]" class="form-control"><p> generelle Inhalte</p>
      <a href="">
      <img src="https://placeholder.jpg">
      </a></textarea>
        </div>
        <span class="txtcnt" id="count">200</span>
      </div>
    </b-collapse>
  </div>

  <div class="accordion-primary mg-b-25">
  <span>
    <a v-b-toggle.collapse-2 class="swap" variant="primary"> Englisch</a>
  </span>
  <b-collapse id="collapse-2" class="">
    <div class="row">
      <div class="col-12">
        <input type="text" class="form-control mg-y-15" placeholder="Title">
      </div>
      <div class="col-12">
        <textarea id="textinput" rows="10" name="en[text]" class="form-control"><p> generelle Inhalte</p>
        <a href="">
        <img src="https://placeholder.jpg">
        </a></textarea>
      </div>
      <span class="txtcnt" id="count">200</span>
    </div>
  </b-collapse>
 </div>
<div class="form-group row">
<label class="col-md-5  d-inline-flex control-label" for="">Anzeigen im Advertiser-Bereich</label>
  <div class="col-md-7">
    <div class="br-toggle toggle_sm br-toggle-primary on">
      <div class="br-toggle-switch switch_sm"></div>
    </div>
  </div>
  <label class="col-md-5  d-inline-flex control-label" for="">Anzeigen im Partner-Bereich</label>
  <div class="col-md-7">
    <div class="br-toggle toggle_sm br-toggle-primary on">
       <div class="br-toggle-switch switch_sm"></div>
    </div>
  </div>
</div> <!-- /form-group -->
</div>
  <div class="modal-footer">
    <a href="#" class="btn btn-light " role="button">Schließen</a> 
    <a href="#" class="btn btn-primary  pd-y-12 pd-0" role="button">Speichern</a> 
  </div>
</div>
</div><!-- modal-dialog -->
</div><!-- modal -->     
        

Bsp eines Modals mit Accordion und interaktiven Icons


              <div class="modal">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                      <div class="modal-header">
                      <h3>Meine Daten</h3>
                      <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                      </button>
                    </div>

              <div class="modal-body">

                <div class="accordion-primary row">
                  <div class="col-md-10">
                  <span>
                  <a v-b-toggle.collapse-3 variant="primary"> Unternehmen
                            <i class="glyphicons-basic-221-chevron-down tx-14 mg-l-15"></i></a>
                          </span>
                        </div>
                        <div class="col-md-2">
                          <a href="#"><i class="t-0 r-15 tx-20 pos-absolute glyphicons-basic-31-pencil icons_primary2_la"></i></a>
                      </div>
                    </div>
                  <b-collapse visible id="collapse-3" class="">

                    <div class="row">
                      <div class="col-md-5 mg-t-15">
      
                          » lead alliance || Gast Account GmbH<br>
                          Karlstraße 9<br>
                          90403 Nürnberg
                      </div>
      
                      <div class="col-md-5 mg-t-15">
      
                          Deutschland<br>
                          Steuer-Nummer: 123<br>
                          Ust.-ID: 
                      </div>
                  </div>

                  </b-collapse>
                 
                  <div class="accordion-primary mg-t-20 row">
                    <div class="col-md-10">
                    <span>
                    <a v-b-toggle.collapse-4 variant="primary"> Ansprechpartner
                              <i class="glyphicons-basic-221-chevron-down tx-14 mg-l-15"></i></a>
                            </span>
                          </div>
                          <div class="col-md-2">
                            <a href="#"><i class="t-0 r-15 tx-20 pos-absolute glyphicons-basic-31-pencil icons_primary2_la"></i></a>
                        </div>
                      </div>
                    <b-collapse id="collapse-4" class="">

                      <div class="row">

                        <div class="col-md-5 mg-t-15">
        
                            Herr<br>
                            Gast Account<br>
                            Abteilung: <br>
                            Telefon: <br>
                            Fax: 
                        </div>
        
                        <div class="col-md-5  mg-t-15">
                          E-Mail: armin.auber@lead-alliance.net<br>
                          Newsletter erhalten: Ja<br>
                            Systemnachrichten auch als E-Mail erhalten: Ja
                        </div>
                    </div>

                    </b-collapse>
               
                    <div class="accordion-primary mg-t-20 row">
                      <div class="col-md-10">
                      <span>
                      <a v-b-toggle.collapse-5 variant="primary"> Bankverbindung
                                <i class="glyphicons-basic-221-chevron-down tx-14 mg-l-15"></i></a>
                              </span>
                            </div>
                            <div class="col-md-2">
                              <a href="#"><i class="t-0 r-15 tx-20 pos-absolute glyphicons-basic-31-pencil icons_primary2_la"></i></a>
                          </div>
                        </div>
                      <b-collapse id="collapse-5" class="">

                        <div class="row">

                          <div class="col-md-5 mg-t-15">
          
                              Inhaber: Andi Latte<br>
                              Konto-Nr.: DE02120300000000202051<br>
                              BIC: BYLADEM1001<br>
                          </div>
          
                          <div class="col-md-5 mg-t-15">
                              Bank: Deutsche Bank Nürnberg<br>
          
                          </div>
                      </div>

                      </b-collapse>

          
                      <div class="accordion-primary mg-t-20 row">
                        <div class="col-md-10">
                        <span>
                        <a v-b-toggle.collapse-6 variant="primary"> Weitere Rechnungsinformationen
                                  <i class="glyphicons-basic-221-chevron-down tx-14 mg-l-15"></i></a>
                                </span>
                              </div>
                              <div class="col-md-2">
                                <a href="#"><i class="t-0 r-15 tx-20 pos-absolute glyphicons-basic-31-pencil icons_primary2_la"></i></a>
                            </div>
                          </div>
                        <b-collapse id="collapse-6" class="">

                          <div class="row">
                            <div class="col-md-10 mg-t-15">
                                Kein Eintrag vorhanden
                            </div>
                           
                        </div>

                        </b-collapse>

                        <div class="accordion-primary mg-t-20 row">
                          <div class="col-md-10">
                          <span>
                          <a v-b-toggle.collapse-7 variant="primary"> API Daten
                                    <i class="glyphicons-basic-221-chevron-down tx-14 mg-l-15"></i></a>
                                  </span>
                                </div>
                                <div class="col-md-2">
                                  <a href="#"><i class="t-0 r-15 tx-20 pos-absolute glyphicons-basic-82-refresh icons_primary2_la"></i></a>
                              </div>
                            </div>
                          <b-collapse id="collapse-7" class="overflow-auto">
  
                            <div class="row ">
                              <div class="col-md-12 mg-t-15">Öffentlicher Schlüssel</div>
                              <div class="col-md-12">ZDBSgmdJawsWOBKVUSOAFBZ7BAaZ3ajsfM9Sapwj1zuuebtv70v8rSBqCqvinB3I</div>
                          </div>
                          <div class="row mg-y-15">
                              <div class="col-md-12">Privater Schlüssel</div>
                              <div class="col-md-12">QaWdBMKVtX4f8LkhMop2ebtr52NdA3aj7xGbMDpVphzUG3Rd8AYiXFGAXfR9NXi4</div>
                          </div>
  
                          </b-collapse>
              
              <div class="row mg-b-15 mg-t-20">
                <div class="col-md-10">
                  <span>
                <a   href="" role="button">
                Passwort ändern
                </a>
              </span>
                </div>
                <div class="col-md-2">
                    <a href="#"><i class="t-0 r-15 tx-20 pos-absolute glyphicons-basic-31-pencil icons_primary2_la"></i></a>
                </div>
            </div>
          </div>

              <div class="modal-footer">
                <a href="#" class="btn btn-light " role="button">Schließen</a> 
                    <a href="#" class="btn btn-primary  pd-y-12 pd-0" role="button">Speichern</a> 
              </div>

            </div>
          </div><!-- modal-dialog -->
              </div><!-- modal -->
            

Bsp eines Modals mit Breadcrumbs, Inputfeldern, Popover und Toggelswitch


          <div class="modal">
            <div class="modal-dialog" role="document">
              <div class="modal-content"> 
                  <div class="modal-header">
                    <nav class="breadcrumb pd-0 mg-0 tx-12">
                      <a class=" breadcrumb-item" href="#">content1</a>
                      <a class="breadcrumb-item" href="#">content2</a>
                      <h3 class="breadcrumb-item active">Daten ändern: XY</h3>
                    </nav>
                    <h3></h3>
                  <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                  
                </div>
                
                <div class="modal-body">
          
                <div class="form-group row">
                  <label class="col-md-4 control-label" for="unternehmen">Unternehmen*</label>
                  <div class="col-md-1">
                    <button type="button" class="btn d-inline-flex icons_primary2_la btn-secondary btn-sm" data-container="body" data-toggle="popover" data-placement="top" 
                    data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">
                      <i class="glyphicons-basic-635-circle-question"></i>
                    </button>
                  </div>
                  <div class="col-md-7">
                      <input type="text" name="p_unternehmen" id="unternehmen" value="» lead alliance || Gast Account" class="form-control">
                  </div>
              </div> <!-- /form-group -->

                      <div class="form-group row">
                        <label class="col-md-5  d-inline-flex control-label" for="rechtsform">ist auch Ansprechpartner</label>
                        <div class="col-md-7">
                          <div class="br-toggle toggle_sm br-toggle-primary on">
                            <div class="br-toggle-switch switch_sm"></div>
                          </div>
                        </div>
                    </div> <!-- /form-group -->

                      <div class="form-group row">
                          <label class="col-md-5  d-inline-flex control-label" for="rechtsform">Rechtsform*</label>
                          <div class="col-md-7">
                              <input type="text" name="p_rechtsform" id="rechtsform" value="GmbH" class="form-control">
                              <span class="help-block"></span>
                          </div>
                      </div> <!-- /form-group -->
          
                      <div class="form-group row">
                          <label class="col-md-5  d-inline-flex control-label" for="strassenr">Straße / Nr.*</label>
                          <div class="col-md-7">
                              <input type="text" name="p_strasse" id="strassenr" value="Straße 99" class="form-control">
                              <span class="help-block"></span>
                          </div>
                      </div> <!-- /form-group -->
          
                      <div class="form-group row">
                          <label class="col-md-5  d-inline-flex control-label" for="plz">PLZ*</label>
                          <div class="col-md-7">
                              <input type="text" name="p_plz" id="plz" value="12345" class="form-control">
                              <span class="help-block"></span>
                          </div>
                      </div> <!-- /form-group -->
          
                      <div class="form-group row">
                          <label class="col-md-5  d-inline-flex control-label" for="ort">Ort*</label>
                          <div class="col-md-7">
                              <input type="text" name="p_ort" id="ort" value="Stadt xy" class="form-control">
                              <span class="help-block"></span>
                          </div>
                      </div> <!-- /form-group -->
          
                      <div class="form-group row">
                          <label class="col-md-5  d-inline-flex control-label" for="land">Land*</label>
                          <div class="col-md-7">
                              <select name="p_land" id="land" class="form-control" style="visibility: visible;">
                                                              <option value="1">land 1</option>
                                                              <option value="2">land 2</option>
                                                              <option value="3">land 3</option>
                                                      </select>
                              <span class="help-block"></span>
                          </div>
                      </div> <!-- /form-group -->
          
                      <div class="form-group row">
                          <label class="col-md-5 align-center d-inline-flex control-label" for="psteuerausweis">Steuer Status</label>
                          <div class="col-md-7">
                              <select name="p_steuer_ausweis" id="psteuerausweis" class="form-control"  onchange="">
                                  <option value="0">Bitte wählen</option>
                                  <option value="1">Unternehmer ohne MwSt.-Ausweis i.S.d. § 19 UStG</option>
                                  <option value="2" selected="'selected'">Unternehmer mit MwSt.-Ausweis</option>
                              </select>
                              <span class="help-block"></span>
                          </div>
                      </div> <!-- /form-group -->
          
                      <div id="steuerdatenfelder" style="display:block;">
                          <div class="form-group row">
                              <label class="col-md-5  d-inline-flex control-label" for="steuer_nummer">Steuernummer</label>
                              <div class="col-md-7">
                                  <input type="text" name="p_steuer_nummer" id="steuer_nummer" value="123" class="form-control">
                                  <span class="help-block"></span>
                              </div>
                          </div> <!-- /form-group -->
          
                          <div class="form-group row">
                              <label class="col-md-5  d-inline-flex control-label" for="fax">Ust-ID</label>
                              <div class="col-md-7">
                                  <input type="text" name="p_steuer_ustid" id="steuer_ustid" value="" class="form-control">
                                  <span class="help-block"></span>
                              </div>
                          </div> <!-- /form-group -->

                          <div class="form-group row">
                            <label class="col-md-5  d-inline-flex control-label" for="">Systemnachrichten per Email erhalten</label>
                            <div class="col-sm-7">
                              <div class="br-toggle toggle_sm br-toggle-primary on">
                                <div class="br-toggle-switch switch_sm"></div>
                              </div>
                            </div>
                        </div> <!-- /form-group -->

                      </div>
          
                  <div class="row">
                      <div class="col-12">
                      <span><i class="glyphicons-basic-217-lock"></i> </span> Alle Daten werden SSL-verschlüsselt</div>
                    </div>

                  </div>
              
                <div class="modal-footer">
                  <a href="#" class="btn btn-light " role="button">Schließen</a> 
                      <a href="#" class="btn btn-primary  pd-y-12 pd-0" role="button">Speichern</a> 
                </div>

              </div>
            </div><!-- modal-dialog -->
                </div><!-- modal -->