Javascript 引导模式窗口未显示_Javascript_Jquery_Html_Twitter Bootstrap

Javascript 引导模式窗口未显示

javascript jquery html twitter-bootstrap

Javascript 引导模式窗口未显示,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我今天尝试在引导上使用模态窗口，但我遇到了一个问题。莫代尔不会出现。我完全按照中所示进行了操作，但仍然不起作用。有人知道这个问题吗？这是我的密码 <html> <head>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha

我今天尝试在引导上使用模态窗口，但我遇到了一个问题。莫代尔不会出现。我完全按照中所示进行了操作，但仍然不起作用。有人知道这个问题吗？这是我的密码

<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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


$（'#myModal'）.on（'show.bs.modal'，function（）{
$（'#myInput'）.focus（）
})
启动演示模式
&时代；
情态标题
...
接近
保存更改

我认为，您有两个问题：

第一个，正如@Cory所说的，我认为您应该将自定义javascript放在页面底部
第二，您没有包括jquery（不要忘记在引导程序之前插入它）

我在这里拉了一把小提琴，将您的

添加到您的模态中，它似乎工作得很好：

希望能有所帮助我想，你有两个问题：

第一个，正如@Cory所说的，我认为您应该将自定义javascript放在页面底部
第二，您没有包括jquery（不要忘记在引导程序之前插入它）

我在这里拉了一把小提琴，将您的

添加到您的模态中，它似乎工作得很好：

希望对您有所帮助

好吧，那么您所需要做的就是将jquery添加到您的javascript库中，正如您在下面看到的那样，您只需复制并粘贴整个代码即可。在文档的头部有一个脚本标签，上面有一个指向引导js文件的链接，上面是指向JQuerysJS文件的链接。引导程序运行于jquery之外，因此没有它就无法工作。使用引导，您总是需要在引导js文件之前加载jquerys js文件

<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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


$（'#myModal'）.on（'show.bs.modal'，function（）{
$（'#myInput'）.focus（）
})
启动演示模式
&时代；
情态标题
...
接近
保存更改

好的，那么您所需要做的就是将jquery添加到javascript库中，正如您在下面看到的那样，您只需复制并粘贴整个代码即可。在文档的头部有一个脚本标签，上面有一个指向引导js文件的链接，上面是指向JQuerysJS文件的链接。引导程序运行于jquery之外，因此没有它就无法工作。使用引导，您总是需要在引导js文件之前加载jquerys js文件

<html>
<head>

<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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


$（'#myModal'）.on（'show.bs.modal'，function（）{
$（'#myInput'）.focus（）
})
启动演示模式
&时代；
情态标题
...
接近
保存更改

如果删除

部分会发生什么？该特定脚本将失败，因为

#myModal

尚不存在。最好将您当前的javascript封装在一个

$（function（）{…加载的东西就在这里}）

部分会发生什么？该特定脚本将失败，因为

#myModal

尚不存在。最好将您当前的javascript封装在一个

$（function（）{…加载的东西就在这里}）

jQuery DOM ready构造中。引导和您的脚本需要jQuery，而您没有加载。您能解释一下如何加载它吗？这方面我是新手。xDgo并将1.x代码片段脚本放在代码的和之间。是的，科里，什么都没发生。我写的那一部分是因为在bootstrap的页面上写着：“由于HTML5如何定义它的语义，autofocus HTML属性在bootstrap modals中没有作用。为了达到同样的效果，请使用一些自定义JavaScript—“现在是我写的脚本部分。”。我真的不知道我哪里出错了。我完全按照需要做了…我也做了，但仍然：（.这就是我的问题。我使用XAMPP有关系吗，因为我用PHP做这个项目，我在本地主机上托管它？嗨@HarisBegic，不，我不认为这是你的问题，这是XAMPP问题。你有没有尝试移动脚本并添加jquery？当你打开浏览器控制台时，你有javascript错误吗？如果有，是什么？没有o完成jquery的哪个版本？我也完成了，但仍然：（.这就是我的问题。我使用XAMPP有关系吗，因为我用PHP做这个项目，我在本地主机上托管它？嗨@HarisBegic，不，我不认为这是你的问题，这是XAMPP问题。你有没有尝试移动脚本并添加jquery？当你打开浏览器控制台时，你有javascript错误吗？如果有，是什么？没有o完成您包含的jquery的哪个版本？