テキストがページを越えないようにJavaScriptのポップアップを変更する

ポップアップボックスを変更して、ウィンドウのサイズを認識し、それに応じてボックスを調整するか、テキストの下に表示するにはどうすればよいですか？テキストがページを越えないようにJavaScriptのポップアップを変更する

私のコードでは、ほぼすべてのテキストがテキストを超えているため、見えません。

「相対」から位置を変更しようとしましたが、目的のエフェクトの近くにどこも行きませんでした。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
/* Popup container - can be anything you want */ 
.popup { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

/* The actual popup */ 
.popup .popuptext { 
    visibility: hidden; 
    width: 160px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -80px; 
} 

/* Popup arrow */ 
.popup .popuptext::after { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: #555 transparent transparent transparent; 
} 

/* Toggle this class - hide and show the popup */ 
.popup .show { 
    visibility: visible; 
    -webkit-animation: fadeIn 1s; 
    animation: fadeIn 1s; 
} 

/* Add animation (fade in the popup) */ 
@-webkit-keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 

@keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity:1 ;} 
} 
</style> 
</head> 
<body style="text-align:center"> 

<h2>Popup</h2> 

<div class="popup" onclick="myFunction()">Click me to toggle the popup! 
    <span class="popuptext" id="myPopup">Фёдор Ильи́ч Дан (настоящая фамилия Гу́рвич;1871—1947) — российский революционер и политический деятель, один из лидеров и теоретиков меньшевизма. Муж сестры Ю. О. Мартова Лидии Дан.<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Fedor_Dan.jpg" class="bubble"></span> 
</div> 

<script> 
// When the user clicks on div, open the popup 
function myFunction() { 
    var popup = document.getElementById("myPopup"); 
    popup.classList.toggle("show"); 
} 
</script> 

</body> 
</html>

出典

2017-12-17 applicant

ポップアップに合わせて画像を配置する必要があります。

.bubble{ 
    width: 100%; 
    height: auto; 
}

これをチェックするfiddle

出典

2017-12-17 22:26:17

上記のテキストの下にポップアップが表示されますか？ – applicant

更新された[フィドル]（https://jsfiddle.net/maheshnathwani/82vq3shk/2/） –

あなたの質問を指定する必要があります。あなたが望むものを理解することは非常に難しいです。

ポップアップボタンの下になりたい場合は、「.popup .popuptext」のボトム値を削除し、『トップ』の代わりに（例えば『トップ：20ピクセル』）を使用する必要があり、私は変更される可能性がどのように

出典

2017-12-17 22:51:06 Beppe

テキストがページを越えないようにJavaScriptのポップアップを変更する

答えて

関連する問題