Modal Bootstrap sichtbar

Meine Website enthält dieses einfache Menü nach Hause, über mich und Kontakt. Es ist Single-Seite Website, ich möchte es einfach für den Benutzer beim Besuch meiner Seite machen, Benutzer kann auf der Seite nach unten scrollen, um den Kontakt oder über mich etc oder Benutzer kann einfach klicken Über mich oder Kontakt und das Fenster wird angezeigt und zeige nur Über mich oder Kontakt [modals in bootstrap verwenden], ich kann das, aber alle Dinge, die modals enthalten, sind auf meiner Seite versteckt. Wie kann ich diese Dinge, die modals enthalten, auf meiner Seite sichtbar machen?Modal Bootstrap sichtbar

Hier sind einfache Kontakt Seitencodes mit modals.

<!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="navbar-collapse collapse" id="navbar"> 
 
      <ul class="nav navbar-nav" id="nav"> 
 
      <li> 
 
       <a href="#">Home 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="#abt_modal" data-toggle="modal" data-target="#abt_modal">About me 
 
       </a> 
 
      </li> 
 

 
      <li> 
 
       <a href="#modal1" data-toggle="modal" data-target="#myModal"> Contact 
 
       </a> 
 
      </li> 
 
      <li> 
 
      
 

 
      </ul> 
 
     </div> 
 

 
<div id="myModal" class="modal" role="dialog"> 
 
     <div class="modal-dialog"> 
 
    <footer class="f7" id="modal1"> 
 
    
 
    <button type="button" class="btn btn-default" data-dismiss="modal" id="close1">Close</button> 
 
     
 
    <div class="container-fluid"> 
 
    
 
    
 
    <div class="row" id="ft"> 
 
    <div class="ft"> 
 
    <h3> SAY HELLO </h3> 
 
    <span>get in touch</span> 
 
    </div> 
 
    
 
    
 
    <div class="col-md-4 a"> 
 
    <p> 
 
    <i class="fa fa-mobile-phone fa-5x"></i> <br><br> 
 
    <span> Call us at </span><br> 
 
    <span> +467i7292518347</span><br> 
 
    </p> 
 
    </div> 
 
    
 
    
 
    <div class="col-md-4 a" > 
 
    <p> 
 
    <i class="fa fa-map-marker fa-5x"></i> <br><br> 
 
    <span> Ul.Zagórze 27A </span> <br> 
 
    <span>05-098 Sadowata,<br> Poland </span> 
 
    </p> 
 
    </div> 
 
    
 
    <div class="col-md-4 a"> 
 
    <p> 
 
    <i class="fa fa-envelope fa-5x"></i><br><br> 
 
    <span> Email us at</span> <br> 
 
    <span>Hotbong20376gó[email protected]</span><br> 
 
    </p> 
 
    </div> 
 
    
 
    </div> 
 
    
 
    </div> 
 
    </footer> 
 
    </div> 
 
    </div>

Quelle

2017-03-22 Jefferson X Masonic

Sind Sie fragen, wie Menü-Links zu verwenden, um einen modalen Dialog zu öffnen? Hast du [http://getbootstrap.com/javascript/#modals] die Dokumentation über Bootstrap-Mods gelesen? Oder gibt es ein anderes Thema? Ihre Frage ist vage und der Code, den Sie bereitgestellt haben, ist nicht wirklich hilfreich – crazymatt

@crazymatt Ich möchte Benutzer haben zwei Optionen 1.Sie können die Seite nach unten scrollen, um Kontaktinformationen zu sehen, oder sie können einfach auf Kontakt auf Menüelemente und die Fenster klicken Popup zeigt nur Kontaktinformationen mit modals, ich habe das gemacht, aber die Informationen, die modale enthalten sind in meiner Seite versteckt, ich möchte sie einblenden, um auf meiner Seite angezeigt zu werden, wenn die Benutzer nach unten scrollen, können sie diese Informationen sehen, r –

@crazymatt Bitte besuchen Sie die Seite hier http://geofrey.texpoldev.com/ 1. U wird bemerken, dass es nicht über mich Inhalt oder Kontaktinhalt auf der Seite, wenn Sie nur nach unten scrollen, aber wenn Sie auf Über mich oder Kontakt klicken In den Menüpunkten werden die Fenster mit Informationen angezeigt. Ich möchte Contest auf meiner Seite angezeigt werden als normal nicht versteckt, wie es gerade jetzt –

Kopieren Schädlingscode in einzelnen Datei und in Ihrem lokalen überprüfen wird es laufen. perfekt. Im Folgenden ist eine moderne Art und Weise, dies zu tun. Sie können sich auf this link beziehen, um weitere Details zur dynamischen Erstellung von Modal zu erhalten.

function openModalDynamic() { 
 
    var message = $('#content-div'); 
 
    BootstrapDialog.show({ 
 
    title: 'Default Title', 
 
    message: $('#content-div'), 
 
    buttons: [{ 
 
     label: 'Close', 
 
     action: function(dialog) { 
 
     dialog.close(); 
 
     } 
 
    }], 
 
    onhide: function(dialog) { 
 
     $('#content-container').append(message); 
 
    } 
 
    }); 
 
}; 
 

 
function openModalDynamic2() { 
 
    BootstrapDialog.show({ 
 
    title: 'Default Title', 
 
    message: $('#content-div').clone(true), 
 
    buttons: [{ 
 
     label: 'Close', 
 
     action: function(dialog) { 
 
     dialog.close(); 
 
     } 
 
    }], 
 
    onhide: function(dialog) {} 
 
    }); 
 
}

<!DOCTYPE html> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 
<button type="button" onclick="openModalDynamic()">Type 1</button> 
 
<button type="button" onclick="openModalDynamic2()">Type 2</button> 
 
<br> Type 1 : This code will cut the div from original location and put it into your modal.<br> Type 2 : This code will copy the div from original location and put it into your modal. So you will see same div at both the place.<br> This will work great 
 
until and unless you have any activity depending upon id's of elements. 
 
<div style="height : 250px"> 
 
</div> 
 

 
<div id="content-container"> 
 
    <div id="content-div"> 
 
    <div class="panel-group"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading">Panel with panel-default class</div> 
 
     <div class="panel-body">Panel Content</div> 
 
     </div> 
 

 
     <div class="panel panel-primary"> 
 
     <div class="panel-heading">Panel with panel-primary class</div> 
 
     <div class="panel-body">Panel Content</div> 
 
     </div> 
 

 
     <div class="panel panel-success"> 
 
     <div class="panel-heading">Panel with panel-success class</div> 
 
     <div class="panel-body">Panel Content</div> 
 
     </div> 
 

 
     <div class="panel panel-info"> 
 
     <div class="panel-heading">Panel with panel-info class</div> 
 
     <div class="panel-body">Panel Content</div> 
 
     </div> 
 

 
     <div class="panel panel-warning"> 
 
     <div class="panel-heading">Panel with panel-warning class</div> 
 
     <div class="panel-body">Panel Content</div> 
 
     </div> 
 

 
     <div class="panel panel-danger"> 
 
     <div class="panel-heading">Panel with panel-danger class</div> 
 
     <div class="panel-body">Panel Content</div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-6"> 
 
      About US will go here. 
 
     </div> 
 
     <div class="col-sm-6"> 
 
      Contact US will go here. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-03-22 15:50:59

Modal Bootstrap sichtbar

Antwort

Verwandte Themen