Как показать всплывающее диалоговое окно?

ProgramBox

Как показать всплывающее диалоговое окно?

Post author:admin
Запись опубликована:25 октября, 2022
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

У меня возникла проблема с созданием небольшого диалогового окна, которое будет отображаться при нажатии на картинку. Теперь мой всплывающий контент просто отображается под картинкой. Ниже приведен мой код:

 function showpopup() {
    document.getElementById("popupwindow").classList.toggle("hidden");
}

 <style>
.hidden {display:none}
</style>



<span class="profile"><img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" style="margin-top: 30px;" onclick="showpopup()"></img></span>
<div id="popupwindow" class="hidden">
<p style="color:black;">LMS short explanation</p>
</div>

Развернуть фрагмент

На самом деле, я хочу результат, как показано на рисунке ниже, содержимое всплывающего окна может отображаться в небольшом диалоговом окне.

Надеюсь, кто-нибудь сможет подсказать мне, как это решить. Спасибо.

Ответ №1:

Обратитесь к этому:

 function showpopup() {
  let tooltip = document.getElementById("tooltiptext");
  let visible = tooltip.style.display;
  if (visible == "none") {
    document.getElementById("tooltiptext").style.display = "block";
  } else {
    document.getElementById("tooltiptext").style.display = "none";
  }

}

 img {
  cursor: pointer;
  margin-top: 30px;
}

.tooltip {
  display: block;
  background: black;
  border-radius: 5px;
  max-width: 300px;
  width: 300px;
  position: absolute;
  padding: 12px 18px;
  font-family: open-sans-regular, sans-serif;
  font-size: 14px;
  color: white;
  line-height: 22px;
  box-sizing: border-box;
  z-index: 1000;
  outline: none;
}

.tooltip.bottom .arrow {
  top: 0;
  left: 50%;
  border-top: none;
  border-bottom: 10px solid black;
}

.tooltip .arrow {
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #43b02a;
  margin-top: -10px;
  margin-left: -10px;
}

 <img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" onclick="showpopup()"></img>
<div id="tooltiptext" class="bottom tooltip" style="display: none;">
  <div class="arrow">
  </div>
  LMS short explanation
</div>

Развернуть фрагмент

Ответ №2:

Вам нужно определить css для всплывающих окон. позиция, верх, слева, z-индекс, цвет фона, ширина, высота и так далее.

1. Спасибо за ваш комментарий. Можете ли вы показать мне образец, основанный на моем кодировании?

2. в народе их называют «модалами» и «всплывающими подсказками», вы можете либо написать их самостоятельно, либо просто подобрать код из Интернета, это просто Google.

3. посмотрите здесь, w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

Ответ №3:

вы можете перейти по этой ссылке

 <!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip.tooltiptext {
  visibility: visible;
}
.hidden{
display: none;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip" onClick="showpopup()">Hover over me
  <span id="popupwindow" class="tooltiptext">Tooltip text</span>
</div>
<script>
function showpopup() {
    document.getElementById("popupwindow").classList.toggle("hidden");
}
</script>
</body>
</html>

1. Моя сторона должна щелкнуть, а затем отобразить содержимое диалогового окна, не может использовать наведение курсора мыши для отображения содержимого.

2. вы можете использовать ту же логику, просто удалите css при наведении курсора и добавьте свою логику щелчка.

Ответ №4:

 

function showpopup() {
    let popup = document.getElementById("popupwindow");
    let display = popup.style.display;
    if (display == "none") {
        popup.style.display = "inline-block";
    } else {
        popup.style.display = "none";
    }
}
<style>
    #popupwindow {
    position: relative;
    display: none;
    width: 200px;
    z-index: 99;
    top: -90px;
    left: -150px;
    border: 3px solid red;
}

.profile {
    display: inline-block;
    border: 5px solid red;
}
</style>

<div>
    <span class="profile"><img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" style="margin-top: 30px;" onclick="showpopup()"></img></span>
    <div id="popupwindow" class="hidden">
        <p style="color:black;">LMS short explanation</p>
    </div>
</div>
 Run code snippetHide resultsExpand snippet

У меня возникли проблемы с редактором фрагментов, поэтому я не могу опубликовать его должным образом.
но вот codepen, касающийся вашего кода.

вы должны заключить весь HTML-код в div и изменить положение относительно него. для всплывающего окна вам нужно оформить его границами, полями, фоном и т. Д.

Если кто-нибудь может это исправить, пожалуйста, сделайте приведенный выше фрагмент рабочим.