bootstrap Modal beim Seiten-laden öffnen lassen, wie?

hallo ich habe ein bootstrap-modal und derzeit ein button womit sich das öffnet. ich will jetzt aber dass es sich direkt beim öffnen der seite öffnet, habe gegoogelt und JS scripts wie diesen gefunden aber da passiert einfach nix.

 $(window).load(function(){        
   $('#myModal').modal('show');
    });

wie lasse ich ein modal beim aufrufen öffnen ??

1 Antwort

Quantm

08.03.2018, 19:27

Du hast keinen Event bei deinem Button eingesetzt. Wenn du es mit JQuery programmieren willst, dann musst du noch einen onclick bei deinem Button setzen.

Es gibt zwei Möglichkeiten:

Entweder setzt du den "onclick"-Attribut im HTML-Skript mit den folgenden Zeile:

<button onclick="$('#mymodal').modal('show')">Öffne Modal</button

oder du schreibst es gleich in Javascript. Als Beispiel hat der Button die Id "test":

$('test').click(function() {
  $('#mymodal').modal('show')
})

Ähnliche Fragen

Php function von HTML aufrufen?

Ich will mit js in einer js function eine php function aus einer php file ausführen die mit Parameter aus der html Daten an meine Datenbank verschickt

...zur Frage

JavaScript: Wieso funktioniert mein Dropdownbutton nicht?

Der Dropdownbutton funktioniert nicht, obwohl Bootstrap verlinkt wurde. Was könnte der Grund sein?

HTML:

  <div class="col-sm-4 col-md-4 " onclick="sortFunction()" style="color: white;text-align: right;">
    <div class="dropdown">
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:white;">Sort By</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Most Liked</a>
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Least Liked</a>
      </div>
    </div>
  </div>
</div>

JavaScript:

function mostLikedSortFunction() {
  movies.sort(function(a, b){return b.num_of_likes - a.num_of_likes});
  CreateMoviesFromJson();
}

function leastLikedsortFunction() {
  movies.sort(function(a, b){return a.num_of_likes - b.num_of_likes});
  CreateMoviesFromJson();
}

...zur Frage

Paragraphen mit Button in JS ausblenden?

Kann mir jemand sagen, wie ich mit dem vorgegebenen Code (ich darf nichts ändern, sondern nur die function ergänzen) die Paragraphen ausblenden kann?

...zur Frage

JS Eventlistener mit Callback Parameter?

Hi, ich mache derzeit das Odins Project und hänge rein vom Verständnis an einem Code-Beispiel fest.

btn.addEventListener('click', function (e) {
  console.log(e);
});

btn.addEventListener --> schauen ob ein Event eintritt und dann eine function ausführen

"click"--> wenn der Button angeklickt wird

function (e)--> hier ist das Problem. ich versehe, dass es eine anonyme callback Funktion ist, aber nicht wieso sich der Parameter e auf den Button bezieht und ich damit den Button ansteuern kann. Versuche es seit 2 Tagen zu verstehen und bitte um eine einfache Erklärung. Im Internet steht, dass das ein Objekt vom EventListener ist aber darunter kann ich mir auch nicht wirklich etwas vorstellen.

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

Javascript - Note berechnen?

Schönen guten Abend,

ich versuche mir selber JS beizubringen und merke, dass es doch nicht ganz so einfach ist. Ich versuche ein Rechner zu programmieren, mit welche man die Zeugnisnote berechnen kann. Leider habe ich Probleme die Werte die ich ins Input-Feld eingebe in JS aufzurufen und zu verarbeiten. Würde mir jemand diesbezüglich helfen?

Bitte verzichtet darauf mir zu sagte wie einfach das sei und wie schlecht ich bin, ich will mich weiter motivieren mich weiterzubilden und mir nicht erzählen lassen wie einfach oder dass ich es doch lassen solle.

Mein JS

function berechnung(){
    var at = document.getElementById("allgemein")
    var kl = document.getElementById("klausur")
    document.getElementById("ergebnis").innerHTML = kl;
    allgemein+klausur
    console.log
}

Mein HTML

<div class="section">
            <p><h2>Notenrechner</h2></p>

            <input type="int" id="allgemein"> <br>
            <input type="int" id="klausur">
            <button onclick="berechnung()">Note berechnen</button>
            <p id=ergebnis></p>


        </div>

...zur Frage

Wie öffnet man bei PAINT.NET wieder die Palette

Wie öffnet man bei PAINT.NET wieder die Palette??? Ich finde keinen Button oder so wo ich wieder die Palette für Paint.net öffnen kann.

...zur Frage

HTML und JS Seitentitel alle 0.2 Sekunden ändern?

Ich bin gerade dabei, eine Seite zu erstellen, die die Möglichkeit hat auf Knopfdruck auf einen Button den Title zu ändern. Das habe ich geschafft, nur wenn ich diesen Titel alle X Sekunden ändern möchte, wie mache ich das?

Ich bedanke mich für verstandlichen Code!

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Title Changer</title>
        <link rel="stylesheet" href="./styles.css" />
        
    </head>


    <body>
        <script src="./app.js"></script>
        Click the button below to make the title go cRaZyYyYyY!
        <button onclick="makeitCrazy()">Make it cRaZyYyYyY</button>
    </body>
</html>

CSS:

body{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
}

JavaScript:

async function makeitCrazy(){
    while(true){
        document.title = 'One';
        await (1);
        document.title = 'Two';
    
    }
    
}

...zur Frage

Bootstrap Dropdown Menü öffnet außerhalb des Bildschirms?

Hi, ich habe auf meiner Website ein Bootstrap Dropdown Menü eingebaut. Dieses befindet sich links am Bildschirmrand. Wenn ich drauftippe, öffnet es sich so, dass die Schrift außerhalb des Bildschirm ist, man das menü also nur zur Hälfte sehen kann. Wie kann ich den Code hier verändern, damit Bootstrap weiß, dass es das menü nicht nach links sondern nach rechts öffnen soll.

Der Code:

<div class="dropdown">
                <button class="btn btn-secondary btn-success px-3" type="button" id="dropdownMenuButton1"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-bars"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                    HIER SIND DIE EINZELNEN LISTENELEMENTE!!!
                </ul>
            </div>

Da das Problem schwer zu erklären ist, kann gerne auch unter meiner GuteFrage profil Seite auf meine Website gehen und auf den Menübutton drücken. Man meine website dann nur auf einem handy oder so öffnen, da sonst der Bildschirm groß genug für das Menü wäre.

Danke für jede Hilfe!!

...zur Frage

Fehler bei JS innerHTML?

Hallo. Ich habe einen kleinen, großen Bug in meinem Code. Vorerst mein Ziel ist es, dass beim Click auf einen expand Button von Bootstrap ein Array als List Element lädt. Es soll für jeden Array Eintrag ein einzelner List Eintrag erstellt werden.

Mein Bug :

Beim Klicken auf den Expand Button finde ich folgende Fehlermeldung vor :

Wenn ich danach nochmal 2 mal auf den Button drücke um das Feld zu schließen und wieder zu öffnen passiert folgendes

Mein Code :

Danke für jede Hilfe. (Man könnte natürlich auch einfach die Funktion beim laden der Seite einmal ausführen, aber ich würde gerne den konkreten Fehler finden)

...zur Frage

Javascript geht nicht in einem von XMLHttpRequest geladenen Div?

Hallo ich versuche gerade mit XMLHttpRequest einen Div auf meiner Webseite zu aktuallisieren soweit geht das auch nur wenn ich versuche in der datei die geladen werden soll etwas mit Javascript auszuführen wird dies nicht getan. Ich habe aber überprüft das die datei geladen wird. Das was ich in JS geschrieben habe wird auch in den Div geladen nur nicht ausgeführt..
Hier meine Datei die den Div läd:

  <script language="javascript" type="text/javascript">
    function getData() {
      var xhr = new XMLHttpRequest();                 // Create XMLHttpRequest object
    
      xhr.onload = function() {                       // When response has loaded
        // The following conditional check will not work locally - only on a server
        if(xhr.status === 200) {                       // If server status was ok
          document.getElementById('load').innerHTML = xhr.responseText; // Update
        }
      };
      
      xhr.open('GET', 'sql/load.php', true);        // Prepare the request
      xhr.send();                                 // Send the request
    }
    
    setInterval(getData, 1000);
</script>

<div id='load'></div>

Hier meine Load.php

<?php
session_start();
require_once "config.php";
require_once "link_user.php";
        //Check new messages
        $test = "false";
        $sql = "SELECT * FROM msg WHERE touser='$user_name' AND readmsg='$test' LIMIT 1";
        $query = mysqli_query($db_link, $sql) or die (mysqli_error());
        $num = mysqli_num_rows($query);
        while ($row = mysqli_fetch_array($query)) {
            $chat_id = $row["chat_id"];

        }
        if($num == 1){
            
echo "<script>
var notification = new Notification('Notification title', {
    icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    body: 'Hey there! You\'ve been notified!',
   });</script>
";
        }
?>

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

Visual Basic: Wie kann ein Programm erst einen 2. Form öffnen und dann sich selbst schließen?

Das eine Programm ruft bei einem Klick auf den Button die Form 2 mit dem Befehl

form2.show

auf.

Jetzt soll sich das erste Programm schließen. Aber wenn ich den Befehl

close()

verwende schließen sich beide Programme!

und wenn ich in Programm 1 die Befehlskette

form2.show

form1.close

verwende, kommt die Fehlermeldung dass das Programm 1 sich nicht selbst aufrufen(beenden) kann.

Wie löse ich das Problem?

...zur Frage

Mit Javascript Button anklicken?

Man kann mit Javascript und einer url diese in einem neuen Tab/Fenster öffnen. Wenn diese geöffnet wurde, ist es dann auch mit Js möglich auf jener Website einen Button anzuklicken?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen