0

Optimize Popoup Windows

How can I optimize this Windows popup,   Center and short Windows.

 

let myObject := do as server
        ((select Artists) order by Name).{
            info: 'Info Artist'
        }
    end;
let css := "
<style>
table{
    width:100%;
}
button{
    font-size:small;
    background-color:#CCFFCC;color:black;
    padding: .1em .2em .1em .2em;
    text-align: center;
    border-radius: .2em .2em .2em .2em;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  overflow-y: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 18px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
";
let content := "
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id='myBtn'> Artist Info </button>
<!-- The Modal -->
<div id='myModal' class='modal'>
<!-- Modal content -->
  <div class='modal-content'>
    <span class='close'>&times;</span>
   <table ><thead>
        <tr>
            <th> Info Artist </th>
        </tr>
    </thead><tbody>";
let mitte := for i in myObject do
        "<tr>
            <td  style=background-color:> " +
        i.info +
        " </td>
        </tr>"
    end +
    "</header>
  </div>
</div>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById('myBtn');
var span = document.getElementsByClassName('close')[0];
btn.onclick = function() {
  modal.style.display = 'block';
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = 'none';
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}
</script>
</body>
</html>

5 Antworten

null
    • Kruna
    • vor 1 JahrFri, November 10, 2023 at 7:35 AM UTC
    • Gemeldet - anzeigen

    Hi Rafael, I would need a sample db please to try to help. :-)

    Saludos

      • Rafael_Sanchis
      • vor 1 JahrFri, November 10, 2023 at 8:51 AM UTC
      • Gemeldet - anzeigen

       Hi kruna the DB is to large I can't share 😔

      • Kruna
      • vor 1 JahrFri, November 10, 2023 at 9:17 AM UTC
      • Gemeldet - anzeigen

      ok, I understand, but what if you duplicate the db and delete the records?

      I will also try to recreate :-)

      saludos

      • Kruna
      • vor 1 JahrFri, November 10, 2023 at 9:31 AM UTC
      • Gemeldet - anzeigen

       

      maybe you can try this to see any changes:

      .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  padding-left: 100px;
  left: 0;
  top: 0;
  width: 50%; /* Full width */
  overflow-y: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

      In line 6 - I added the padding left and in line 9 reduced the width fromm 100% to 50%

       

      saludos

      • Rafael_Sanchis
      • vor 1 JahrFri, November 10, 2023 at 9:32 AM UTC
      • Gemeldet - anzeigen

       ok There are many images I will try

Anmelden, um zu antworten

Content aside

Kategorien

Alle Themen anzeigen
  • vor 1 JahrFri, November 10, 2023 at 9:32 AM UTCZuletzt aktiv
  • 5Antworten
  • 82Ansichten
  • 2 Folge bereits