MARKTPLATZ/marktplatz/templates/marktplatz/modal-share.html

{% load fullurl %}
{% load tags %}
{% load static %}

    <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);
    }

    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }

    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    </style>


    <!-- Trigger/Open The Modal -->
    <span id="ShareButton" class="cursor-pointer" ><i class="fas fa-share"></i> Teilen </span>

    <!-- The Modal -->
    <div id="ShareModal" class="modal" onclick="function hide(e){ e.style.display='None'; } hide(this);" >
      <!-- Modal content -->
      <div class="modal-content">
        <span id="ShareClose" class="close">&times;</span>

        <div class=""> &nbsp; </div>
        <i class="fas fa-share"></i>
        <h3>Teilen</h3>
        <div class=""> &nbsp; </div>
        <div class=""> &nbsp; </div>

        <div class="row">
          <div class="col-sm-4">
            <div class="cursor-pointer" onclick="myFunction()">

            <i class="fas fa-code"></i> <br>
            <span>Text Kopieren</span>
          </div>
          </div>
            <div class="col-sm-4">
              <div class="cursor-pointer" onclick="myFunction()">

              <a href="mailto:?subject={{  product.wohnprojekt  }}&body=Guten%20Tag!%0D%0A%0D%0AIch%20finde%20das%20folgende%20Projekt%20sehr%20interesant!%0D%0A%0D%0A{% fullurl 'product-detail-embed' pk=product.wohnprojekt.pk %}"><i class="fas fa-envelope"></i> <br>Send mail</a>
            </div>
            </div>
            <div class="col-sm-4"></div>
        </div>
        <div class=""> &nbsp; </div>
        <div class=""> &nbsp; </div>




        <input type="text" value="&lt;iframe src=&quot;{% fullurl 'product-detail-embed' pk=product.wohnprojekt.pk %}&quot; style=&quot;border:0px #ffffff none;&quot; name=&quot;myiFrame&quot; scrolling=&quot;yes&quot; frameborder=&quot;0&quot; marginheight=&quot;0px&quot; marginwidth=&quot;0px&quot; height=&quot;400px&quot; width=&quot;600px&quot; allowfullscreen&gt;&lt;/iframe&gt;" id="myInput">

        <div class=""> &nbsp; </div>
        <div class=""> <span>Link</span> </div>

        <input type="text" value="{% fullurl 'product-detail-embed' pk=product.wohnprojekt.pk %}" id="myLink">

        <div class=""> &nbsp; </div><div class=""> &nbsp; </div>

      </div>
    </div>


    <script>
    var ShareModal = document.getElementById("ShareModal");
    var ShareBtn = document.getElementById("ShareButton");
    var ShareSpan = document.getElementById("ShareClose");
    ShareBtn.onclick = function() {
      ShareModal.style.display = "block";
    }
    ShareSpan.onclick = function() {
      ShareModal.style.display = "none";
    }
    function myFunction() {
      var copyText = document.getElementById("myInput");
      copyText.select();
      copyText.setSelectionRange(0, 99999)
      document.execCommand("copy");
      alert("Copied the text: " + copyText.value);
    }

    </script>