Modal einrichten

Hi,
Kennt sich jemand von euch mit Modals aus ?

Ich habe folgendes versucht:

HTML:

Code:

<div id="wrap" class="text-center">
  <!-- Button trigger modal -->
  <br>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Modal with blur effect
</button>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3 text-center">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
        <br><br>
        <h1>Modal with blur effect</h1>
        <h2>Put here whatever you want here</h2>
        <h4>For instance, a login form or an article content</h4>
        <h4><kbd>esc</kbd> or click anyway to close</h4>
        <hr>
        <div class="alert alert-danger"><h4>You can add any html and css ;)</h4></div>
      </div>
    </div>
  </div>
</div>

CSS:

Code:

body.modal-open #wrap{
    -webkit-filter: blur(7px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
}
 
.modal-backdrop {background: #f7f7f7;}

.close {
    font-size: 50px;
    display:block;
}

Der Button wird angezeigt, aber es passiert nichts beim Klicken. Gambio hat scheinbar auch eine extra Modal.php !? gibts da evtl konflikte?



Cheers

Eugene

 

Wo und wie hast du das eingefügt? Eigentlich sollte das so gehen.

 

Also, die .Css natürlich in den Usermod/CSS ordner gepackt.

Und dann den Html code über den Content manager auf die gwünschte seite gepackt.

 

könnte es sein, das da noch ein JS fehlt

 

ich habe das mal bei einem Kunden umgesetzt https://www.kartoffel-mueller.de/info/ueber-uns.html oben rechts die zwei Bilder, dazu habe ich noch eine modal.min.js in den templates/Honeygrid/usermod/javascript/Global gepackt

 

Hm, ich hab jetzt schon verschiedene Modal scripts ausprobiert, auch welche mit JS aber auch one Erfolg. Hab auch mal zum Spaß meinen popup/adblock deaktiviert, daran liegt es aber auch nicht.

 

du kannst das direkt von Boostrap nehmen http://holdirbootstrap.de/javascript/#modals das JS bekommst du im Downloadpaket bei boostrap mit oder konfigurierst dir das hier http://holdirbootstrap.de/anpassen-und-herunterladen/

 

Der HTML Code sieht dann so aus

HTML:

<div aria-hidden="true" aria-labelledby="meinModalLabel" class="modal fade" id="meinModal2" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>

<h4 class="modal-title" id="meinModalLabel">Stand auf dem Wochenmarkt</h4>
</div>

<div class="modal-body"><img alt="Unser Stand auf dem Ulmer Wochenmarkt" class="img-responsive" src="images/EigeneBilder/UeberUns/popup_ulmer_wochenmarkt02.jpg" title="Unser Stand auf dem Ulmer Wochenmarkt" /></div>

<div class="modal-footer"><button class="btn btn-default" data-dismiss="modal" type="button">Schlie&szlig;en</button></div>
</div>
</div>
</div>

 

Hi @Kai Schoelzke ,
danke für deine Antwort.
Leider klappt das auch nicht bei mir, keine Ahnung was ich da falsch mache.
Ich habe mir das (Hier http://holdirbootstrap.de/anpassen-und-herunterladen/ ) so konfiguriert, dass nur der code für Modals in die bootstrap.js geschrieben wurde. Die habe ich dann in modals.js umbenannt und in meinen usermod JS/Global Ordner gepackt.

Wenn ich danach deinenen Code via contentmanager bei mir einsetze, wird mir anschließend nichts davon im frontend angezeigt ( Trotz Cache leeren etc.)

Ich hab auch testweise, den Code vom Bootstrap modals Tutorial kopiert, da sehe ich dann den Button aber keine Aktion bei klicks.

Könnte das noch an etwas anderem liegen ? Funktioniert es bei dir ?



Liebe Grüße

Eugene