Bootstrap Modal หายไปทันที

ฉันกำลังทำงานบนเว็บไซต์โดยใช้ bootstrap

โดยทั่วไปฉันต้องการที่จะใช้เป็นกิริยาช่วยในหน้าแรกเรียกโดยปุ่มในหน่วยฮีโร่

รหัสปุ่ม:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

รหัสโมดัล:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

ปัญหาคือว่าทันทีที่ฉันคลิกที่ปุ่ม modal จางหายไปแล้วหายไปทันที

ฉันขอขอบคุณความช่วยเหลือใด ๆ

นอกจากนี้วิธีการเปลี่ยนสีของรูปสามเหลี่ยมแบบเลื่อนลง (ชี้ขึ้นไม่มีโฮเวอร์)? ฉันทำงานในเว็บไซต์ที่ใช้สีส้มและสีน้ำตาลและสิ่งที่สีน้ำเงินนั้นน่ารำคาญจริงๆ

สาเหตุที่เป็นไปได้

นี่เป็นพฤติกรรมปกติเมื่อปลั๊กอิน JavaScript สำหรับ Modal ถูกโหลดสองครั้ง โปรดตรวจสอบให้แน่ใจว่าปลั๊กอินไม่ได้รับการโหลดสองครั้ง ขึ้นอยู่กับแพลตฟอร์มที่คุณใช้รหัส modal สามารถโหลดได้จากแหล่งที่เป็นตัวเลข บางส่วนที่พบบ่อยคือ:

• bootstrap.js (ชุดโปรแกรม BootStrap JS เต็มรูปแบบ)
• bootstrap.min.js (เหมือนกับข้างบนเพิ่งย่อขนาด)
• bootstrap-modal.js (ปลั๊กอินแบบสแตนด์อโลน)
• โหลดเดอร์อ้างอิงเช่น require('bootstrap')

เคล็ดลับการแก้จุดบกพร่อง

จุดเริ่มต้นที่ดีคือการตรวจสอบclickผู้ฟังเหตุการณ์ที่ลงทะเบียนโดยใช้เครื่องมือนักพัฒนาในเบราว์เซอร์ของคุณ ยกตัวอย่างเช่น Chrome จะแสดงรายการไฟล์ต้นฉบับ JS ซึ่งสามารถลงทะเบียนรหัสผู้ฟังได้ อีกตัวเลือกหนึ่งคือการพยายามค้นหาแหล่งที่มาบนหน้าเว็บสำหรับวลีที่พบในรหัส Modal var Modalเช่น

น่าเสียดายที่สิ่งเหล่านี้ไม่สามารถค้นหาได้ทุกกรณี การตรวจสอบคำขอเครือข่ายอาจมีประสิทธิภาพมากกว่าเดิมเล็กน้อยเมื่อให้ภาพของทุกสิ่งที่โหลดบนหน้าเว็บ

การสาธิต (ใช้งานไม่ได้)

นี่คือตัวอย่างของสิ่งที่เกิดขึ้นเมื่อคุณโหลดทั้งbootstrap.jsและbootstrap-modal.js (เพียงเพื่อยืนยันประสบการณ์ของคุณ):

Plunker

หากคุณเลื่อนลงไปที่ด้านล่างของแหล่งที่มาในหน้านั้นคุณสามารถลบหรือใส่เครื่องหมาย<script>บรรทัดสำหรับbootstrap-modal.jsจากนั้นตรวจสอบว่าตอนนี้ modal จะทำงานได้ตามที่คาดไว้

ฉันมีปัญหาเดียวกัน แต่มีสาเหตุที่แตกต่างกัน ฉันทำตามเอกสารและสร้างปุ่มขึ้นมาเช่น:

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

เมื่อฉันคลิกมันปรากฏว่าไม่มีอะไรเกิดขึ้น อย่างไรก็ตามปุ่มอยู่ในปุ่ม<form>ซึ่งเป็นการดึงข้อมูลหน้าเดิมชั่วคราว

ฉันแก้ไขสิ่งนี้ด้วยการเพิ่มtype="button"องค์ประกอบปุ่มเพื่อที่จะไม่ส่งแบบฟอร์มเมื่อคลิก

สำหรับฉันสิ่งที่ทำงานคือการลบ

data-toggle="modal"

จากปุ่ม ปุ่มสามารถเป็นองค์ประกอบใด ๆ - ลิงค์, div, ปุ่ม ฯลฯ

ฉันค้นหาสักครู่สำหรับการอ้างอิง bootstrap ที่ซ้ำกันในแอป mvc ของฉันหลังจากคำตอบที่เป็นประโยชน์อื่น ๆ ในคำถามนี้

ในที่สุดก็พบมัน - มันถูกรวมอยู่ในห้องสมุดอื่นที่ฉันใช้อยู่ดังนั้นจึงไม่ชัดเจนเลย! ( datatables.net)

หากคุณยังคงพบปัญหานี้ให้ค้นหาไลบรารีอื่นที่อาจรวมถึง bootstrap ให้คุณ ( datatables.netอนุญาตให้คุณระบุการดาวน์โหลดที่มีหรือไม่มีบูทสแตรป - อื่น ๆ ทำเช่นเดียวกัน)

ดังนั้นฉันจึงลบออกbootstrap.min.jsจากของฉันbundle.configและทำงานได้ดี

อาการเดียวกันในบริบทของแอพพลิเคชั่น Rails ที่มี Bootstrap จัดหาให้โดยbootstrap-sassgem และคำตอบของ @ merv ทำให้ฉันถูกทาง

application.jsไฟล์ของฉันมีดังต่อไปนี้:

//= require bootstrap
//= require bootstrap-sprockets

การแก้ไขคือการลบหนึ่งในสองบรรทัด แท้จริงแล้ว readme ของอัญมณีเตือนคุณเกี่ยวกับข้อผิดพลาดนี้ ความผิดฉันเอง.

รหัสของฉันมี bootstrap.min.js รวมอยู่สองครั้ง ฉันลบหนึ่งในนั้นและทุกอย่างทำงานได้ดีในขณะนี้

e.preventDefault(); ด้วย jQuery ui

สำหรับฉันปัญหานี้เกิดขึ้นกับวิธีการคลิกแทนที่ปุ่ม jquery ui ทำให้หน้าโหลดเมื่อคลิกโดยค่าเริ่มต้น

ปัญหายังสามารถเกิดขึ้นได้หากใช้ jquery ที่คุณแนบตัวฟังเหตุการณ์สองครั้ง สำหรับตัวอย่างคุณจะตั้งค่าโดยไม่มีการผูก:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

หากสิ่งนี้เกิดขึ้นเหตุการณ์จะเริ่มทำงานสองครั้งติดต่อกันและกิริยาจะหายไป

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

ดูตัวอย่าง: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

ฉันวิ่งเข้าไปในอาการเดียวกับที่ @passe แสดงให้เห็นในตัวอย่างของเขา นี่คือรหัสของฉัน ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

ตามที่ @Bhargav แนะนำปัญหาของฉันเกิดจากปุ่มที่พยายามส่งแบบฟอร์มและโหลดหน้าซ้ำ ผมเปลี่ยนปุ่มไปยัง<a>ลิงค์ดังต่อไปนี้:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... และมันแก้ไขปัญหา

หมายเหตุ: ฉันยังไม่มีชื่อเสียงเพียงพอที่จะเพียงแค่เพิ่มความคิดเห็นหรือยกระดับขึ้นและฉันรู้สึกว่าฉันสามารถเพิ่มการชี้แจงเล็กน้อย

ฉันก็มีปัญหาเดียวกัน แต่สำหรับฉันมันเกิดขึ้นเพราะฉันมีปุ่มที่มีประเภท "ส่ง" ภายในรูปแบบคำกริยา ฉันเปลี่ยน

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

ถึง

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

และนั่นก็แก้ไขปัญหาการหายตัวไป

ในกรณีของฉันฉันมีไฟล์ bootstrap.js ไฟล์ jquery.js เพียงไฟล์เดียว แต่ยังคงได้รับข้อผิดพลาดประเภทนั้นและรหัสของฉันสำหรับปุ่มนั้นเป็นดังนี้:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

ฉันเพิ่มe.preventDefaultง่าย ๆ(); มันและมันทำงานเหมือนมีเสน่ห์

ดังนั้นรหัสใหม่ของฉันเป็นเหมือนด้านล่าง:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

ฉันเจอปัญหานี้ด้วยตัวเองในวันนี้และมันเกิดขึ้นเฉพาะใน Chrome สิ่งที่ทำให้ฉันรู้ว่าอาจเป็นปัญหาการแสดงผล การย้ายโมดอลเฉพาะไปยังเลเยอร์การแสดงผลของมันเองนั้นแก้ไขได้

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

ในกรณีของฉันการคลิกที่ปุ่มทำให้เกิดการโหลดหน้าเว็บอีกครั้ง (ไม่ต้องการ)

นี่คือการแก้ไขของฉัน:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

ในกรณีของฉันฉันมีactionlinkปุ่มใช้ใน MVC และฉันกำลังเผชิญกับปัญหานี้ฉันได้ลองวิธีแก้ปัญหาหลายวิธีข้างต้นและอื่น ๆ แต่ยังคงประสบปัญหานั้นจากนั้นฉันก็ตระหนักถึงข้อผิดพลาดของฉันในรหัส

ฉันเรียกว่า modal ใน javascript โดยใช้

 $('#ModalId').modal('show');

ก่อนเกิดข้อผิดพลาดฉันใช้ปุ่มนี้

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

ฉันไม่มีค่าสำหรับคุณสมบัติ href ในปุ่มนี้ดังนั้นฉันจึงพบปัญหา

จากนั้นฉันจะแก้ไขรหัสปุ่มนี้เช่นนี้

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

แล้วปัญหาได้รับการแก้ไขเพียงข้อผิดพลาดเพราะไม่มี # ในคนแรก

ดูว่าสิ่งนี้จะเป็นประโยชน์กับคุณ

อีกสาเหตุหนึ่ง / วิธีแก้ไข! ฉันมีในรหัส JS ของฉัน:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

แต่โค้ด HTML ของฉันถูกเขียนเป็น:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

นี่คือการเรียงสับเปลี่ยนของการทำซ้ำรหัสและทำให้โมดัลเปิดและปิดอีกครั้ง ในกรณีของฉันdata-targetและdata-toggleใน html ตามเอกสาร Bootstrap จะทำให้ modal ทำงานได้ รหัส JS จึงซ้ำซ้อนและเมื่อลบจะใช้งานได้

ฉันมีปัญหาเดียวกันกับที่ทำงานกับโครงการด้วย asp.NET ฉันใช้ bootstrap 3.1.0 แก้ไขมันลดระดับเป็น Bootstrap 2.3.2

ฉันก็มีปัญหาเช่นกันถ้าปุ่มอยู่ข้างใน แท็กจากนั้น modal จะปรากฏขึ้นหนึ่งครั้งและหายไปเร็วพอที่จะเอาปุ่มออกจากแบบฟอร์มเพื่อแก้ไข isue ขอบคุณฉันสิ้นสุดในหัวข้อนี้! +1 ให้กับทุกคน

ฉันประสบปัญหาเดียวกันระหว่างการทดสอบอุปกรณ์มือถือและเคล็ดลับนี้ใช้งานได้สำหรับฉัน

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

เปลี่ยนปุ่มเพื่อยึดแท็กให้ใช้งานได้ปัญหาเกิดขึ้นเนื่องจากปุ่มชนิดขณะที่พยายามส่งเพื่อให้ modal หายไปทันทีและลบ hide จาก modal hide fade ให้ <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> หวังว่านี่จะทำงานให้คุณ

ในกรณีของฉันฉันมี CDN รวมอยู่ในหัวของ application.html.erb และติดตั้งอัญมณี 'jquery-rails' ซึ่งฉันเดาว่าต้องขอบคุณเอกสารและโพสต์ด้านบนซึ่งซ้ำซ้อน

ฉันเพียงแค่แสดงความคิดเห็นจาก CDN (ด้านล่าง) จากส่วนหัวของ application.html.erb และ modal จะเปิดอย่างเหมาะสม

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

ฉันมีปัญหาเดียวกันด้วย ปัญหากับฉันคือฉันกำลังแสดง modal เมื่อกดลิงค์และแจ้งให้ยืนยันด้วย jquery

รหัสด้านล่างแสดงคำกริยาและที่หายไปทันที:

<a href="" onclick="do_some_stuff()">Hey</a>

ฉันลงเอยด้วยการเพิ่ม '#' เพื่อ href ดังนั้นลิงก์จะไม่ไปที่ใดก็ได้และมันแก้ไขปัญหาของฉันได้

<a href="#" onclick="do_some_stuff()">Hey</a>

คุณลองลบแล้ว

data-dismiss="modal"

ฉันรู้ว่านี่เก่า แต่นี่เป็นอีกสิ่งที่ต้องตรวจสอบ - ตรวจสอบให้แน่ใจว่าคุณมี data-target = attribute เท่านั้น ฉันได้ทำซ้ำและผลที่ได้ตามกระทู้นี้

ฉันเพิ่มลงbootstrapในโครงการของฉันbowerแล้วฉันก็นำเข้าbootstrap.min.jsไฟล์และหลังmodal.jsไฟล์ (ปุ่มที่เปิดเป็นกิริยาช่วยอยู่ในรูปแบบ) ฉันเพิ่งลบการนำเข้าmodal.jsและจะทำงานให้

ในกรณีที่ใครใช้ codeigniter 3 bootstrap พร้อม DataTable

ด้านล่างนี้เป็นวิธีแก้ไขของฉันใน config / ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

ต้องเผชิญกับปัญหาเดียวกัน @mervเหตุผลก็คือเช่นเดียวกับ ปัญหาคือเมื่อมีการเพิ่มองค์ประกอบปฏิทินลงในหน้าตัวเองเพิ่มองค์ประกอบของคุณสมบัติ modal ที่จะใช้ในป๊อปอัพปฏิทิน

ดังนั้นเหตุผลที่ทำให้แตกรุ่นของป๊อปอัพจะเป็นอย่างน้อยหนึ่งอย่างต่อไปนี้

• กำลังโหลดมากกว่าหนึ่ง bootstrap js รุ่น / ไฟล์ (ย่อ ... )
• การเพิ่มปฏิทินภายนอกไปยังเพจที่ใช้ bootstrap
• การเพิ่มการแจ้งเตือนที่กำหนดเองหรือห้องสมุดป๊อปอัพไปยังหน้า
• ไลบรารีอื่นใดที่เพิ่มลักษณะการทำงานแบบผุดขึ้น

ในขณะที่ทำงานกับ Angular (5) ฉันประสบปัญหาเดียวกัน แต่ในกรณีของฉันฉันแก้ไขดังนี้

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">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">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

หมายเหตุ: จำเป็นต้องนำเข้า jquery ในไฟล์ ts เป็น "ประกาศ var $: any;"

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

การเปลี่ยนแปลงที่ฉันทำ:

• ลบ "data-toggle =" modal "จากปุ่มแท็ก (ขอบคุณ @miCRoSCoPiC_eaRthLinG คำตอบนี้ช่วยฉันที่นี่) ในกรณีของฉันมันแสดงคำกริยาดังนั้นฉันจึงสร้าง (คลิก) =" showresult () "

• ภายใน component.ts ต้องประกาศ Jquery ($) และวิธีการคลิกปุ่มภายใน showresult () โทร "$ ('# myModal'). modal ('แสดง');"

ฉันมีปัญหาเดียวกันเพราะฉันสลับเป็นกิริยาช่วยของฉันสองครั้งดังแสดงด้านล่าง:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

ฉันได้ลบสิ่งที่เกิดขึ้น:

$ ( '# myErrorModal'). คำกริยา ( 'สลับ')

และมันก็ใช้งานได้เหมือนเวทมนตร์!