Html automatisch Submit button ausführen

dsm4 · 25 September 2021

Hallo,
möchte bei diesen html code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Simple Success Confirmation Popup</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
font-family: 'Varela Round', sans-serif;
}
.modal-confirm {
color: #636363;
width: 325px;
font-size: 14px;
}
.modal-confirm .modal-content {
padding: 20px;
border-radius: 5px;
border: none;
}
.modal-confirm .modal-header {
border-bottom: none;
position: relative;
}
.modal-confirm h4 {
text-align: center;
font-size: 26px;
margin: 30px 0 -15px;
}
.modal-confirm .form-control, .modal-confirm .btn {
min-height: 40px;
border-radius: 3px;
}
.modal-confirm .close {
position: absolute;
top: -5px;
right: -5px;
}
.modal-confirm .modal-footer {
border: none;
text-align: center;
border-radius: 5px;
font-size: 13px;
}
.modal-confirm .icon-box {
color: #fff;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: -70px;
width: 95px;
height: 95px;
border-radius: 50%;
z-index: 9;
background: #82ce34;
padding: 15px;
text-align: center;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.modal-confirm .icon-box i {
font-size: 58px;
position: relative;
top: 3px;
}
.modal-confirm.modal-dialog {
margin-top: 80px;
}
.modal-confirm .btn {
color: #000000;
border-radius: 4px;
background: #82ce34;
text-decoration: none;
transition: all 0.4s;
line-height: normal;
border: none;
}
.modal-confirm .btn:hover, .modal-confirm .btn:focus {
background: #6fb32b;
outline: none;
}
.trigger-btn {
display: inline-block;
margin: 100px auto;
}
</style>
</head>
<body style="background-image:url(Wallpaper.jpg)">
<div class="text-center">

<a href="#myModal" class="trigger-btn" data-toggle="modal">Succesfully</a>
</div>


<div id="myModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<h4 class="modal-title w-100">Awesome!</h4>
</div>
<div class="modal-body">
<p class="text-center">Succesfully.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-block" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</body>
</html>

das das Fenster mit Awesome automatisch angezeigt/ausgelöst wird und man nicht drauf drücken muss.

Grüße

threadi · 25 September 2021

Das ist eine Bootstrap-spezifische Frage die wenig mit HTML zu tun hat. Die Lösung ist im Manual von Bootstrap zu finden:

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

getbootstrap.com

Beispiel:

Code:

<script>
	$(document).ready(function(){
		$("#myModal").modal('show');
	});
</script>[code]

Demo:
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=show-bootstrap-modal-on-page-load

Gelöschtes Mitglied 36401 · 25 September 2021

threadi schrieb:
Die Lösung ist im Manual von Bootstrap zu finden

Wer guckt denn schon ins Manual?

Html automatisch Submit button ausführen

dsm4

Neues Mitglied

Anhänge

threadi

Moderator

Modal

Gelöschtes Mitglied 36401

Guest

Neueste Beiträge