为什么我的模态不起作用？ Bootstrap4

时间：2017-02-24 11:51:40

标签： javascript jquery html twitter-bootstrap

我想知道为什么我的Bootstrap 4模态不起作用。任何线索？我直接从Bootstrap 4网站（http://v4-alpha.getbootstrap.com/components/modal/#live-demo）复制并粘贴。另外，我添加了他们说的js。

请在下面找到代码。

由于

我查过了其他帖子，但我没有运气

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta content="Description" name="description">
  <meta content="index,follow" name="robots">
  <link href="/images/myicon.png" rel="icon" type="image/png">
  <title>TITLE HERE</title>
  <!--CSS-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

  <!--Bootstrap CSS JS-->
  <!--fonts-->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

<body>

  <!--CB-modal -->
  <!-- Button trigger modal -->
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</body>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
  $("#MyModal").modal();
  });
  })
</script>



</html>

8 个答案:

答案 0 :(得分：8)

您的代码段中有拼写错误（最后未使用});），但最重要的是，您的切换按钮的目标是错误的模式ID。确保data-target是您要定位的模式的ID：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

演示：

＆＃13;
＆＃13; 
$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
    $("#myModal").modal();
  });
</script>



</html>
＆＃13;
＆＃13;
＆＃13;

编辑：根据@OlavT请求更新了Bootstrap 4-beta：

＆＃13;
＆＃13; 
$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
    $("#myModal").modal();
  });
</script>



</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您遇到了一些脚本错误，data-target="#exampleModal"与模型的ID

不匹配 

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta content="Description" name="description">
  <meta content="index,follow" name="robots">
  <link href="/images/myicon.png" rel="icon" type="image/png">
  <title>TITLE HERE</title>
  <!--CSS-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

  <!--Bootstrap CSS JS-->
  <!--fonts-->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

<body>

  <!--CB-modal -->
  <!-- Button trigger modal -->
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</body>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
     $("#MyModal").modal();
     $('#myModal').on('shown.bs.modal', function() {
        $('#myInput').focus();
     });
  });
</script>



</html>

答案 2 :(得分：1)

我降落在这里是因为我遇到了同样的错误。回去看了一下之后。我碰到了以下内容：

如果您正在使用我们编译的JavaScript，请不要忘记在它之前包含jQuery和Popper.js的CDN版本。

因为我下载了bootstrap 4并像以前一样使用bootstrap v3复制了文件夹，所以我认为它一切正常。

下载部分包含popper和jQuery的CDN

https://getbootstrap.com/docs/4.0/getting-started/download/

希望这有帮助... Nessio

答案 3 :(得分：0)

import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.JPanel;

public class ImagePanel extends JPanel{

    private BufferedImage image;

    public ImagePanel() {
       try {                
          image = ImageIO.read(new File("image name and path"));
       } catch (IOException ex) {
            // handle exception...
       }
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(image, 0, 0, this); // see javadoc for more info on the parameters            
    }

}

答案 4 :(得分：0)

您输入的数据目标名称看起来不正确。 这是您按钮的正确代码

     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

答案 5 :(得分：0)

您的数据目标错误：#exampleModal，应为#myModal。

另外，你的js代码中的语法不正确

$(document).ready(function() {
  $("#MyModal").modal();
  });
  })//remove this

＆＃13;
＆＃13; 
$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
});
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta content="Description" name="description">
  <meta content="index,follow" name="robots">
  <link href="/images/myicon.png" rel="icon" type="image/png">
  <title>TITLE HERE</title>
  <!--CSS-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

  <!--Bootstrap CSS JS-->
  <!--fonts-->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

<body>

  <!--CB-modal -->
  <!-- Button trigger modal -->
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</body>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->


<!--modal-->
<script>
  $(document).ready(function() {
  $("#MyModal").modal();
  });
</script>



</html>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

我遇到了相同的错误，但原因有所不同（...有点傻）。我在使用class _MyHomePageState extends State<MyHomePage> { TextEditingController contPasazer1 = TextEditingController(); TextEditingController contPasazer2 = TextEditingController(); TextEditingController contPasazer3 = TextEditingController(); // no need of setState() void clearBoxes() { contPasazer1.clear(); contPasazer2.clear(); contPasazer3.clear(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Container( height: double.infinity, width: double.infinity, padding: EdgeInsets.symmetric(horizontal: 20.0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ TextFormField(controller: contPasazer1), SizedBox(height: 20.0), TextFormField(controller: contPasazer2), SizedBox(height: 20.0), TextFormField(controller: contPasazer3), SizedBox(height: 20.0), // Your delete button from another class DeleteBtn(delete: () => clearBoxes()) ] ) ) ); } } // Your other class class DeleteBtn extends StatelessWidget { final Function delete; DeleteBtn({this.delete}); @override Widget build(BuildContext context) { return Expanded( child: Container( height: 40, margin: EdgeInsets.only(right: 8), decoration: BoxDecoration( color: Color(0xFF616161), borderRadius: BorderRadius.all(Radius.circular(20)), ), child: FlatButton( padding: EdgeInsets.symmetric(horizontal: 0), child: Text( "Smazat hodnoty pasažérů", style: TextStyle(fontSize: 10), ), onPressed: () { print(delete); delete(); }, ), ), ); } } 时，无意中将DeleteBtn放在了thymeleaf layout之外。

modal div

因此，尽管代码中存在content fragment，但并未在<div layout:fragment="content"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#someId">Open</button> ... </div> <div class="modal" id="someId"> </div> 上呈现（已通过modal div进行了检查）。它无提示地失败，没有任何错误/警告。 请确保在DOM上呈现View Page Source。

答案 7 :(得分：0)

我的问题在这里得到了准确的解释。 https://stackoverflow.com/a/49039205/9855327 就我而言，它与错误的引用ID无关，这是因为我在C＃/ Aspnet MVC中的循环表中创建了一个模式。我为每个表格行创建了一个模式。

我刚刚在主体标签下面插入了以下代码：

<script>
jQuery(document).ready(function () {
   jQuery("body").children().first().before($(".modal"));
});
</script>

它将所有模态HTML元素移到正文的开头，对我来说就足够了。

相关问题
最新问题