Home>

javascript - i have a question about how to use modal with bootstrap

I want to display a modal using bootstrap for web page creation, but when I click the corresponding button, the entire screen is grayed out, but the essential pop-up is not displayed.
I think this is the reason why the pop-up is not displayed properly because JQuery put in JavaScript is an error, but does anyone know the solution?

Or I wrote a script tag in the HTML head and specified that jQuery is used, but is this part wrong?

Below is the login form using the HTML modal.

<!-Navigation list->
        <ul>
          <li>About us</li>
          <li>Promotion</li>
          <li>Contact Us</li>
          <li>Room List</li>
        </ul>
        <button type = "button">Login</button>
          <button type = "button">Sign Up</button>
        
    </nav>
      
<! --- SIGN UP AND LOG IN ------------------------------>
      
<! --------------- START LOGIN FORM -------------------->
<!-Modal->
  
  <!-Modal content->
    
      
      <button type = "button" data-dismiss = "modal">&times;</button>
       <span></span>Login 
      
      
      <form role = "form">
          
          <label for = "usrname"><span></span>Username</label>
          <input type = "text" placeholder = "Enter email">
          
          
          <label for = "psw"><span></span>Password</label>
          <input type = "text" placeholder = "Enter password">
          
          
          <label><input type = "checkbox" value = "" checked>Remember me</label>
          
          <button type = "submit"><span></span>Login</button>
      </form>
      
      
      <button type = "submit" data-dismiss = "modal"><span></span>Cancel</button>
      <p>Not a member?  Sign Up</p>
      <p>Forgot  Password?</p>


I think there is something wrong with any (or all) of the above three, but I would appreciate it if you could tell me.

javascript html jquery bootstrap pop-up
  • Answer # 1

    I think it means "deprecated" rather than an error.

    .ready ()
    As of jQuery 3.0, only the first syntax is recommended;the other syntaxes still work but are deprecated.This is because the selection has no bearing on the behavior of the .ready () method, which is inefficient and can lead to incorrect

    .click is also rather.on ('click',…)I think the format of is better.

    If you want to open modally, do you need an option for the argument?
    Bootstrap4 --Modal # Methods
    $('# targetId'). modal ('show')

    If it is a fixed timing such as "button click" instead of "I want to generate it at any timing", use that buttondata-toggle = "modal" data-target = "# targetId"I think it's easier to guess.

  • Answer # 2

    Use jQuery below

    $('# login_myBtn'). on ('click', function () {
    $('#myModal'). modal ('show');
    });

    Remove and in HTML

Related articles