Jimdo Text-Element als PopUp

Quelle: http://www.syakirurohman.net/en/2015/01/create-popup-without-javascript-jquery.html

Beispiel:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.

+ Mehr erfahren

 

 

 

HowToDo

Textfeld im html-Modus öffnen:

  • Schwarz: Inhalt Textfeld
  • rot: Funktionalität für Popup (ergänzen) 

<p><strong>Beispiel:</strong></p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</p>

 

<div class="buttonContainer" style="width: 165px; margin: 0 auto;">
  <a href="#popup" class="popup-link">+ Mehr erfahren</a>
  <div class="popup-wrapper" id="popup2">
    <div class="popup-container"><form action="#" method="post" class="popup-form">

<h2 class="">...neues Popup</h2>

<p>Daripada hanya melihat demo untuk popup-nya saja, lebih baik masukkan juga email anda agar mendapatkan pemberitahuan saat ada update posting menarik lain seperti ini.<br /> <strong>Percayalah, saya hanya akan mengirim sesuatu yang bermanfaat untuk anda :)</strong></p>

      </form><a class="popup-close" href="#closed">X</a>
    </div>
  </div>
</div>

 

CSS (Einstellungen > Head bearbeiten):

  • Datei "popup.css" auf eigener Seite hochladen und als Link einbinden:

<link type="text/css" media="all" href="http://51023348.swh.strato-hosting.eu/_test/css-popup/css/popup.css" rel="stylesheet" /> 

  • CSS im <head> der Webseite bearbeiten

<style>

    a.popup-link, a.popup-link:hover {
        padding: 8px 0;
        text-align: center;
        width:150px;
        margin:0;
        position: relative;
        color: #666;
        text-decoration: none;
        background-color: #fff;
        display: block;
        border-radius: 20px;
        border:1px solid #ccc;
        /* box-shadow: 0 5px 0px 0px #666;*/
    }

    a.popup-link, a.popup-link:hover, a.popup-link:visited, a.popup-link:active {
        box-shadow: none;
    }

    #popup h2 /*, #popup1 h2, #popup2 h2, #popup3 h2 */ {color:#fff}

    #closed /*, #closed1, #closed2, #closed3 */  {margin-top:-120px}

    .popup-container {
        position: relative;
        margin: 10% auto;
        padding: 30px 50px;
        background-color: #333;
        color: #fff;
        border-radius: 5px; 
    }

    .popup-close { border-radius: 3px; }

</style>