xxxxxxxxxx1
<div aria-live="polite" aria-atomic="true" id="popover">2
<div class="toast" style="position: absolute; top: 0; right: 0;" data-autohide="false">3
<div class="toast-header">4
<svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"5
focusable="false" role="img">6
<rect fill="#007aff" width="100%" height="100%" /></svg>7
<strong class="mr-auto">Bootstrap</strong>8
<small>11 mins ago</small>9
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">10
<span aria-hidden="true">×</span>11
</button>12
</div>13
<div class="toast-body">14
Hello, world! This is a toast message.15
</div>16
</div>17
</div>18
19
<div class="container">20
21
<div class="row justify-content-center pt-5 mt-5">22
<div class="col-md-1">23
<button type="button" class="btn btn-primary" id="btnId">TL</button>24
</div>25
<div class="col-md-1">26
<button type="button" class="btn btn-primary" id="btnId2">T</button>27
</div>28
<div class="col-md-1">29
<button type="button" class="btn btn-primary" id="btnId3">TR</button>30
</div>31
<div class="col-md-1">32
<button type="button" class="btn btn-primary" id="btnId4">RT</button>33
</div>34
<div class="col-md-1">35
<button type="button" class="btn btn-primary" id="btnId5">R</button>36
</div>37
<div class="col-md-1">38
<button type="button" class="btn btn-primary" id="btnId6">RB</button>39
</div>40
<div class="col-md-1">41
<button type="button" class="btn btn-primary" id="btnId7">BR</button>42
</div>43
<div class="col-md-1">44
<button type="button" class="btn btn-primary" id="btnId8">B</button>45
</div>46
<div class="col-md-1">47
<button type="button" class="btn btn-primary" id="btnId9">BL</button>48
</div>49
<div class="col-md-1">50
<button type="button" class="btn btn-primary" id="btnId10">LB</button>51
</div>52
<div class="col-md-1">53
<button type="button" class="btn btn-primary" id="btnId11">L</button>54
</div>55
<div class="col-md-1">56
<button type="button" class="btn btn-primary" id="btnId12">LT</button>57
</div>58
59
60
</div>1
1
xxxxxxxxxx1
document.getElementById('btnId').addEventListener('click', function () {2
$(".toast").css({"left":"10%","top":"0%"});3
$('.toast').toast('show');4
});5
6
document.getElementById('btnId2').addEventListener('click', function () {7
$(".toast").css({"left":"40%","top":"0%"});8
$('.toast').toast('show');9
});10
11
document.getElementById('btnId3').addEventListener('click', function () {12
$(".toast").css({"left":"70%","top":"0%"});13
$('.toast').toast('show');14
});15
16
document.getElementById('btnId4').addEventListener('click', function () {17
$(".toast").css({"left":"85%","top":"10%"});18
$('.toast').toast('show');19
});20
21
document.getElementById('btnId5').addEventListener('click', function () {22
$(".toast").css({"left":"85%","top":"40%"});23
$('.toast').toast('show');24
});25
26
document.getElementById('btnId6').addEventListener('click', function () {27
$(".toast").css({"left":"85%","top":"80%"});28
$('.toast').toast('show');29
});30
31
document.getElementById('btnId7').addEventListener('click', function () {32
$(".toast").css({"left":"70%","top":"91%"});33
$('.toast').toast('show');34
});35
36
document.getElementById('btnId8').addEventListener('click', function () {37
$(".toast").css({"left":"40%","top":"91%"});38
$('.toast').toast('show');39
});40
41
document.getElementById('btnId9').addEventListener('click', function () {42
$(".toast").css({"left":"10%","top":"91%"});43
$('.toast').toast('show');44
});45
46
document.getElementById('btnId10').addEventListener('click', function () {47
$(".toast").css({"left":"0%","top":"80%"});48
$('.toast').toast('show');49
});50
51
document.getElementById('btnId11').addEventListener('click', function () {52
$(".toast").css({"left":"0%","top":"40%"});53
$('.toast').toast('show');54
});55
56
document.getElementById('btnId12').addEventListener('click', function () {57
$(".toast").css({"left":"0%","top":"10%"});58
$('.toast').toast('show');59
}); Console errors: 0