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

    <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="myBtn" class="cursor-pointer"><i  class="fas fa-bell"></i> Suchagent aktivieren</span>

    <!-- The Modal -->
    <div id="SearchAgentModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <span id="agentClose" class="close">&times;</span>
        <iframe src="{% url 'search-agent-create-embed' %}" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="600px" width="100%" 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";
    }
    /*
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
    */
    </script>