Nima uchun modal ishlamaydi? Bootstrap4

Nima uchun mening Bootstrap 4 modali ishlamayapti ekan? Har qanday maslahat? To'liq ma'noda Bootstrap 4 veb-saytidan (" http://v4- alpha.getbootstrap.com/components/modal/#live-demo ) Bundan tashqari, ular aytgan JS qo'shdik.

Kodni quyida toping.

Rahmat

Boshqa lavhalarni tekshirib chiqdim va menda omad yo'q edi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
<!DOCTYPE HTML>


<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">
          
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          
        </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>
</div> </div>

4
Ushbu xatolik aslida v4 dokumentatsiyasida yozilgan ko'rinadi. E'tibor bergan bo'lsangiz, lekin bu nusxa ko'chirish yoki sof namunani ishlamasligi bezovta qilmasa tutish qiyin emas.
qo'shib qo'ydi muallif rob, manba
Konsolda sintaksik xato mavjudligini aytadi. Kod parchasini ishlatishga harakat qiling, siz ham buni ko'rasiz.
qo'shib qo'ydi muallif Just a student, manba
$ ("# MyModal") ni tanladingiz va modsal identifikatoringiz id = "myModal" ni tuzatdi. also-data-target = "# exampleModal" sizning modsal idingiz "myModal"
qo'shib qo'ydi muallif xurca, manba

6 javoblar

Sizning parchangizda (foydalanilmagan }) oxirida harflar mavjud, lekin eng muhimi, sizning almashtirish tugmasi noto'g'ri modsal identifikatorni belgilaydi. data-target maqsadli modalning idi ekanligiga ishonch hosil qiling:

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

Namoyish:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
<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">
        
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          
        </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>
</div> </div>

Edit: Updated Bootstrap 4-beta as per @OlavT request:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
})
<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">
        
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          
        </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>
</div> </div>

7
qo'shib qo'ydi
Men Bootstrap versiyasi 4 beta 2 dan foydalanmoqdaman. Modal ochiladi, lekin butun sahifa (modalni o'z ichiga oladi). Quyidagi sahifani tushunib etdimki, bu modalning o'zi emas, balki zerikarli bo'lishi kerak. Va tugma tugmachalari men uchun bosilmaydi. Modaldan tashqaridagi sahifani bosganimda ham ochiq qoladi.
qo'shib qo'ydi muallif Arya, manba
Kimdir buni Bootstrap 4.0.0-beta bilan sinab ko'rdimi? Men modalni namoyish qila olmadim.
qo'shib qo'ydi muallif OlavT, manba
Qayta ishlay boshladim. Mening mahalliy popper.js fayli bilan ba'zi muammolar yuzaga kelganiga o'xshaydi. Uni CDN dan foydalanganda u yaxshi ishlaydi.
qo'shib qo'ydi muallif OlavT, manba
@Olavmani yaxshi ishlay boshladi. Barcha kerakli fayllarni import qildingizmi? V4-beta demo uchun ajratilgan javobni ko'ring.
qo'shib qo'ydi muallif AVAVT, manba
Rasmiy veb-saytidan nusxa ko'chirish va yapıştırdıklarını aytgani uchun, u, ehtimol, bir xat yozma bo'lishi mumkin? Men OP bilan bir xil masalaga egaman.
qo'shib qo'ydi muallif Nik-Lz, manba

Sizda ba'zi bir skript xatosi bor va data-target = "# exampleModal" modelning identifikatori bilan mos emas

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>


<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">
          
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          
        </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>
</div> </div>

1
qo'shib qo'ydi

Men bu erga tushdim, chunki men bir xil xatolarga duch keldim. Orqaga qaytib, biroz o'qib chiqib. Quyidagilarga kirdim:

Agar siz bizning olingan JavaScript-ni ishlatayotgan bo'lsangiz, jQuery va Popper.js ning CDN versiyasini oldinda saqlashni unutmang.

Bootstrap 4 ni yuklab olganimda va papkalarni bootstrap v3 bilan birga foydalanganimdan nusxa ko'chirganligim sababli, hamma ishlay boshlagan deb taxmin qildim.

Yuklash bo'limida popup va jQuery uchun CDN bor

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

Umid qilamanki ... Nessio

1
qo'shib qo'ydi

sizning ma'lumotlaringiz noto'g'ri: #exampleModal , #myModal bo'lishi kerak.

Shuningdek, sizning JS kodingizda noto'g'ri sintaksisi mavjud

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
});
<!DOCTYPE HTML>


<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">
          
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          
        </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>
</div> </div>

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

Noto'g'ri kiritilgan ma'lumotlar-maqsadli nomga o'xshaydi. Bu tugmachaning to'g'ri kodi

     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb