คำถามติดแท็ก modal-dialog

หมายถึงกล่องโต้ตอบแบบกราฟิกที่ใช้เพื่อแสดงข้อมูลสำคัญให้กับผู้ใช้ กล่องโต้ตอบเหล่านี้จะปรากฏเหนือเนื้อหาอื่น ๆ ทั้งหมดโดยจะบล็อกขั้นตอนการสมัครจนกว่าจะได้รับข้อมูลจากผู้ใช้

30
Bootstrap modal ปรากฏภายใต้พื้นหลัง
ฉันใช้รหัสสำหรับ modal โดยตรงจากตัวอย่าง Bootstrap และรวมเฉพาะ bootstrap.js (ไม่ใช่ bootstrap-modal.js) อย่างไรก็ตามคำกริยาของฉันปรากฏใต้จางสีเทา (ฉากหลัง) และไม่สามารถแก้ไขได้ นี่คือสิ่งที่ดูเหมือนว่า: ดูซอนี้สำหรับวิธีหนึ่งในการทำให้เกิดปัญหานี้อีกครั้ง โครงสร้างพื้นฐานของรหัสนั้นเป็นดังนี้: <body> <p>Lorem ipsum dolor sit amet.</p> <div class="my-module"> This container contains the modal code. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">Modal</div> </div> </div> </div> </div> </body> body { padding-top: 50px; } .my-module { position: …
18
ไม่อนุญาตให้ปิดหน้าต่าง modal Twitter Bootstrap
ฉันกำลังสร้างหน้าต่างโมดัลโดยใช้ Twitter Bootstrap พฤติกรรมเริ่มต้นคือถ้าคุณคลิกนอกพื้นที่ modal คำกริยาจะปิดโดยอัตโนมัติ ฉันต้องการปิดการใช้งานนั่นคือไม่ปิดหน้าต่าง modal เมื่อคลิกนอก modal มีคนแบ่งปันรหัส jQuery เพื่อทำสิ่งนี้ได้ไหม
11
ผูกฟังก์ชั่นกับ Twitter Bootstrap Modal Close
ฉันใช้ Twitter Bootstrap lib ในโครงการใหม่และฉันต้องการให้บางส่วนของหน้าเว็บทำการรีเฟรชและดึงข้อมูล json ล่าสุดเมื่อปิดการใช้งาน ฉันไม่เห็นสิ่งนี้ในเอกสารใด ๆ ใครสามารถชี้ให้ฉันหรือแนะนำวิธีแก้ปัญหา ปัญหาสองประการเกี่ยวกับการใช้วิธีการที่ทำเป็นเอกสาร $('#my-modal').bind('hide', function () { // do something ... }); ฉันแนบคลาส "ซ่อน" กับโมดัลแล้วดังนั้นจึงไม่ปรากฏในการโหลดหน้าเพื่อที่จะโหลดสองครั้ง แม้ว่าฉันจะลบคลาส hide และตั้งค่าองค์ประกอบ id display:noneและเพิ่มconsole.log("THE MODAL CLOSED");ไปยังฟังก์ชั่นด้านบนเมื่อฉันกดปิดไม่มีอะไรเกิดขึ้น
18
ปิดการใช้งานการคลิกนอกพื้นที่ mod bootstrap เพื่อปิด modal
ฉันกำลังทำเว็บไซต์ bootstrap โดยใช้ 'Modals' สองสาม Bootstrap ฉันกำลังพยายามปรับแต่งคุณสมบัติเริ่มต้นบางอย่าง ปัญหาคือสิ่งนี้ คุณสามารถปิดคำกริยาโดยคลิกที่พื้นหลัง อย่างไรก็ตามมีการปิดใช้งานคุณลักษณะนี้หรือไม่ เกี่ยวกับ modifc modals เท่านั้น? Bootstrap หน้า modal
25
ปิด Bootstrap Modal
ฉันมีกล่องโต้ตอบ modal bootstrap ที่ฉันต้องการแสดงเริ่มแรกจากนั้นเมื่อผู้ใช้คลิกที่หน้ามันจะหายไป ฉันมีดังต่อไปนี้: $(function () { $('#modal').modal(toggle) }); <div class="modal" id='modal'> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Error:</h3> </div> <div class="modal-body"> <p>Please correct the following errors:</p> </div> </div> </div> คำกริยาจะปรากฏขึ้นครั้งแรก แต่จะไม่ปิดเมื่อคลิกที่ด้านนอกของคำกริยา นอกจากนี้พื้นที่เนื้อหาไม่ได้เป็นสีเทา .. ฉันจะทำให้ modal แสดงได้อย่างไรจากนั้นปิดหลังจากที่ผู้ใช้คลิกนอกพื้นที่? และฉันจะทำให้พื้นหลังเป็นสีเทาเหมือนในตัวอย่างได้อย่างไร
24
วิธีซ่อน Bootstrap modal ด้วย javascript
ฉันได้อ่านโพสต์ที่นี่เว็บไซต์ Bootstrap และ Googled อย่างบ้าคลั่ง - แต่ไม่สามารถหาสิ่งที่ฉันแน่ใจว่าเป็นคำตอบที่ง่าย ... ฉันมี Bootstrap เป็นกิริยาช่วยที่ฉันเปิดจากผู้ช่วย link_to เช่นนี้ <%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %> ในของฉันContactsController.createการกระทำฉันมีรหัสที่สร้างแล้วผ่านออกไปContact create.js.erbในcreate.js.erbฉันมีรหัสการจัดการข้อผิดพลาด (การผสมผสานของทับทิมและจาวาสคริปต์) หากทุกอย่างไปได้ด้วยดีฉันต้องการปิดคำกริยา ที่นี่ฉันมีปัญหา ฉันไม่สามารถละทิ้งคำกริยาเมื่อทุกอย่างเป็นไปด้วยดี ฉันลอง$('#myModal').modal('hide');แล้วและนี่ไม่มีผล ฉันได้ลองแล้ว$('#myModal').hide();ซึ่งเป็นสาเหตุให้คำสั่งยกเลิก แต่ออกจากฉากหลัง คำแนะนำเกี่ยวกับวิธีการปิดคำกริยาและ / หรือยกเลิกฉากหลังจากภายในcreate.js.erb? แก้ไข นี่คือมาร์กอัปสำหรับ myModal: <div class="modal hide" id="myModal" > …
30
Bootstrap 3 ตำแหน่งศูนย์กลางแนวตั้งเป็นกิริยาช่วย
นี่เป็นคำถามสองส่วน: คุณจะวางตำแหน่งคำกริยาในแนวตั้งได้อย่างไรเมื่อคุณไม่ทราบความสูงที่แท้จริงของคำกริยา? เป็นไปได้หรือไม่ที่จะมีคำกริยาที่กึ่งกลางและล้น: อัตโนมัติในตัวโมดอล แต่เฉพาะถ้าโมดัลมีความสูงเกินความสูงของหน้าจอ ฉันได้ลองใช้สิ่งนี้: .modal-dialog { height: 80% !important; padding-top:10%; } .modal-content { height: 100% !important; overflow:visible; } .modal-body { height: 80%; overflow: auto; } สิ่งนี้ทำให้ฉันได้ผลลัพธ์ที่ฉันต้องการเมื่อเนื้อหามีขนาดใหญ่กว่าขนาดหน้าจอแนวตั้ง แต่สำหรับเนื้อหาที่เป็นกิริยาช่วยเล็กน้อยมันใช้ไม่ได้
22
Twitter bootstrap modal ระยะไกลจะแสดงเนื้อหาเดียวกันทุกครั้ง
ฉันใช้ bootstrap ของ Twitter ฉันได้ระบุโมดัล <div class="modal hide" id="modal-item"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>Update Item</h3> </div> <form action="http://www.website.com/update" method="POST" class="form-horizontal"> <div class="modal-body"> Loading content... </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <button class="btn btn-primary" type="submit">Update Item</button> </div> </form> </div> และการเชื่อมโยง <a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a> <a href="http://www.website.com/item/2" data-target="#modal-item" …
30
Twitter bootstrap modal-backdrop ไม่ได้หายไป
ฉันกำลังใช้กล่องโต้ตอบ Mod bootstrap ของ Twitter เมื่อฉันคลิกที่ปุ่มส่งของไดอะล็อก bootstrap modal มันจะส่งคำขอ AJAX ปัญหาของฉันคือฉากหลังกิริยาไม่หายไป กล่องโต้ตอบ Modal หายไปอย่างถูกต้อง แต่แทนที่จะเป็น "modal-Backdrop ใน" ที่สร้างความทึบของหน้าจอให้คงอยู่ ฉันจะทำอย่างไร
5
ฉันจะแสดงกล่องโต้ตอบโมดัลใน Redux ที่ดำเนินการแบบอะซิงโครนัสได้อย่างไร
ฉันกำลังสร้างแอพที่จำเป็นต้องแสดงข้อความยืนยันในบางสถานการณ์ สมมติว่าฉันต้องการลบบางอย่างจากนั้นฉันจะส่งการกระทำเช่นdeleteSomething(id)นั้นบางตัวลดจะจับเหตุการณ์นั้นและจะเติมตัวลดการโต้ตอบเพื่อแสดง ข้อสงสัยของฉันเกิดขึ้นเมื่อกล่องโต้ตอบนี้ส่ง ส่วนประกอบนี้จะส่งการกระทำที่เหมาะสมตามการกระทำแรกที่ส่งไปได้อย่างไร ผู้สร้างแอ็คชั่นควรจัดการกับตรรกะนี้หรือไม่? เราสามารถเพิ่มการกระทำภายในตัวลดได้หรือไม่? แก้ไข: เพื่อให้ชัดเจน: deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id) createThingB(id) => Show dialog with Questions => createThingBRemotely(id) ดังนั้นฉันจึงพยายามใช้องค์ประกอบการโต้ตอบใหม่ การแสดง / ซ่อนกล่องโต้ตอบไม่ใช่ปัญหาเพราะสามารถทำได้อย่างง่ายดายในตัวลด สิ่งที่ฉันพยายามระบุก็คือวิธีส่งการกระทำจากด้านขวาตามการกระทำที่เริ่มต้นการไหลทางด้านซ้าย
27
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> …
4
จะจัดการกับเหตุการณ์ปิดคำสั่งใน Twitter Bootstrap ได้อย่างไร
ใน Twitter bootstrap ดูที่เอกสารคู่มือ modals ฉันไม่สามารถเข้าใจได้ว่ามีวิธีฟังเหตุการณ์ปิดของคำกริยาและเรียกใช้ฟังก์ชันหรือไม่ เช่นให้ใช้คำกริยานี้เป็นตัวอย่าง: <div class="modal-header"> <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <a href="#" class="btn close_link" data-dismiss="modal">Close</a> </div> ปุ่ม X ที่ด้านบนและปุ่มปิดที่ด้านล่างสามารถซ่อน / ปิดคำกริยาdata-dismiss="modal"ได้ ดังนั้นฉันสงสัยว่าถ้าฉันสามารถฟังอย่างนั้น? อีกทางหนึ่งฉันสามารถทำได้ด้วยตนเองเช่นนี้ฉันเดา ... $("#salesitems_modal").load(url, data, function() { $(this).modal('show'); $(this).find(".close_link").click(modal_closing); }); คุณคิดอย่างไร?
10
jquery-ui-dialog - วิธีเชื่อมต่อกับเหตุการณ์ปิดไดอะล็อก
ฉันใช้jquery-ui-dialogปลั๊กอิน ฉันกำลังมองหาวิธีรีเฟรชหน้าเมื่ออยู่ในบางสถานการณ์เมื่อปิดกล่องโต้ตอบ มีวิธีในการจับภาพเหตุการณ์ปิดจากกล่องโต้ตอบหรือไม่? ฉันรู้ว่าฉันสามารถเรียกใช้รหัสได้เมื่อคลิกปุ่มปิด แต่ไม่ครอบคลุมการปิดผู้ใช้ด้วยการยกเว้นหรือ x ที่มุมบนขวา
8
วิธีข้ามไปที่ด้านบนสุดของหน้าเบราว์เซอร์
ฉันกำลังเขียนป๊อปอัพคำกริยาและฉันต้องการเบราว์เซอร์เพื่อข้ามไปยังด้านบนของหน้าจอเมื่อกดปุ่มเปิดโหมด มีวิธีการเลื่อนเบราว์เซอร์ไปด้านบนโดยใช้ jQuery หรือไม่?
28
ซ้อนทับ modals หลาย
ฉันต้องการให้โอเวอร์เลย์แสดงเหนือโมดัลแรกไม่ใช่ที่ด้านหลัง แสดงตัวอย่างโค้ด $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div><div class="container"></div> <div class="modal-body"> Content for the dialog / modal goes here. <br> <br> <br> <br> <br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.