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

    <!-- <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 3;
      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="myBtn" class="cursor-pointer"><i  class="fas fa-bell"></i> Suchagent aktivieren</span>

    <!-- The Modal -->
    <div id="SearchAgentModal" class="modal" onclick="function hide(e){ e.style.display='None'; } hide(this);" >
      <!-- Modal content -->
      <div class="modal-content">
        <!-- {% now "YFdHi-u" %} -->

        <span id="agentClose" class="close">&times;</span>
        <iframe src="{% url 'search-agent-form-embed' %}?bz={{ product.ort }}" style="border:0px #ffffff none; width:100%;" name="myiFrame" height="600" allowfullscreen></iframe>

      </div>
    </div>


    <script>
    var modal = document.getElementById("SearchAgentModal");
    var btn = document.getElementById("myBtn");
    var agentSpan = document.getElementById("agentClose");
    btn.onclick = function() {
      modal.style.display = "block";
    }
    agentSpan.onclick = function() {
      modal.style.display = "none";
    }




    </script>