Jquery 我在这件事上做错了什么吗_Jquery

Jquery 我在这件事上做错了什么吗

jquery

Jquery 我在这件事上做错了什么吗,jquery,Jquery,需要帮助需要模态弹出窗口的帮助。我对这个和学习是新的。因为某种原因，流行音乐不起作用。获取错误未捕获的TypeError:$（…）。模式不是函数我知道我做错了什么。你能建议一下如何修理吗 &时代；我们无法找到您的设备。请选择您的国家和语言。我国：选择国家大不列颠联合王国我的语言：选择语言大不列颠联合王国下一个 $（窗口）.load（函数（）{ 控制台日志（“弹出窗口”） $（“#mypop”）.modal（）； }); 我将您的代码粘贴到一个通用页面布局中（使用用于j

需要帮助需要模态弹出窗口的帮助。我对这个和学习是新的。因为某种原因，流行音乐不起作用。获取错误

未捕获的TypeError:$（…）。模式不是函数

我知道我做错了什么。你能建议一下如何修理吗


&时代；
我们无法找到您的设备。
请选择您的国家和语言。
我国：
选择国家
大不列颠联合王国


我的语言：
选择语言
大不列颠联合王国
下一个
$（窗口）.load（函数（）{
控制台日志（“弹出窗口”）
$（“#mypop”）.modal（）；
});

我将您的代码粘贴到一个通用页面布局中（使用用于jQuery和bootstrap的CDN），一切似乎都正常。在执行与这些库相关的任何函数之前，必须确保同时包含jQuery和bootstrap。我通常在页面正文的末尾包含库和脚本，但是您可以将启动代码包装为$（document）.ready（function（）{…}）；如果你愿意的话

<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>Ron Help</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body class="">

<div class="modal fade" id="mypop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>

      <div class="modal-body">
        <h4>We are unable to locate your device.</h4>
        <h4>Please select your country and language.</h4>
        <div class="form-group col-lg-12 col-md-12 col-xs-12 no_padding">
                <div class="no_padding">
            <label>My Country:</label>
            <select name="countries_popup" id="countries_popup" class="selectBox">
            <option selected="selected">Choose country</option>
                <option>Austria</option>
                <option>United Kingdom</option>
                <option>Ireland</option>
                <option>Romania</option>
            </select>
            </div>
            </div>
            <br>
            <div class="form-group col-lg-12 col-md-12 col-xs-12 no_padding">
                <div class="no_padding">
            <label>My language:</label>
            <select name="language_popup" id="language_popup" class="selectBox">
            <option selected="selected">Choose language</option>
                <option>Austria</option>
                <option>United Kingdom</option>
                <option>Ireland</option>
                <option>Romania</option>
            </select>
            </div>
            </div>

      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-primary col-xs-12 col-sm-6 gonext">Next</button>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(window).load(function(){ 
  console.log("popup")
  $("#mypop").modal();

       $('.gonext').click(function(){
            var countriesValue = $('select#countries_popup option:selected').val();
           var languageValue = $('select#language_popup option:selected').val();



           $('#countries option').filter(function() { 
                  return ($(this).text() == countriesValue);

              }).prop('selected', true);
           $('#countries option,#language option').prop('disabled', true);
           $('#language option').filter(function() { 
                  return ($(this).text() == languageValue); 
              }).prop('selected', true);


          $('.modal-open #mypop,.modal-backdrop.fade.in').hide();
          $('body').removeClass('modal-open');

       });
  });
</script>
</body>    
</html>


罗恩，救命
&时代；
我们无法找到您的设备。
请选择您的国家和语言。
我国：
选择国家
奥地利
大不列颠联合王国
爱尔兰
罗马尼亚


我的语言：
选择语言
奥地利
大不列颠联合王国
爱尔兰
罗马尼亚
下一个
$（窗口）.load（函数（）{
控制台日志（“弹出窗口”）
$（“#mypop”）.modal（）；
$（'.gonext'）。单击（函数（）{
var countriesValue=$（'select#countries_弹出选项：selected'）.val（）；
var languageValue=$（'select#language_弹出选项：selected'）.val（）；
$（“#国家选项”）.filter（函数（）{
返回（$（this）.text（）==countriesValue）；
}).prop（'selected'，true）；
$（“#国家选项，#语言选项”）.prop（'disabled'，true）；
$（“#语言选项”）.filter（函数（）{
返回（$（this）.text（）==languageValue）；
}).prop（'selected'，true）；
$（'.modal open#mypop、.modal background.fade.in'）.hide（）；
$（'body'）.removeClass（'modal-open'）；
});
});

脚本位于正文内容之后时，应该可以安全地排除window.load（）

因为您使用的是引导，所以需要包含

css

和

js

文件引用

在包含

jquery

标记后，请包含以下内容

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

这里有一个相同的示例。

是否包含了

.modal（）

函数的库？请尝试$（“#mypop”）.dialog（）；而不是modal（）。这是fiddle Jay，我正在使用bootstrap.min.js和jquery.js。从阅读中，它包含了.modal（）函数。嘿，Sushil，dialog（）可以工作，但没有一个css被应用。@ron包含jqueryui css。小提琴使用了不同的css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>