it-swarm.asia

استدعاء وظيفة على bootstrap مشروط مفتوحة

اعتدت استخدام مربع حوار JQuery UI ، وكان الخيار open ، حيث يمكنك تحديد بعض تعليمات Javascript البرمجية للتنفيذ بمجرد فتح مربع الحوار. كنت قد استخدمت هذا الخيار لتحديد النص داخل مربع الحوار باستخدام وظيفة لدي.

الآن أريد أن أفعل ذلك باستخدام مشروط bootstrap. يوجد أدناه رمز HTMl:

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

وبالنسبة للزر الذي يفتح الوسائط:

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

لقد حاولت استخدام مستمع onclick للزر ، ولكن تم عرض رسالة التنبيه قبل ظهرت الوسائط:

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});
145
Mohamed Khamis

يمكنك استخدام الحدث الظاهر / show event بناءً على ما تحتاج إليه:

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

العرض التوضيحي: الغطاس

تحديث لـ Bootstrap 3.0

بالنسبة إلى Bootstrap 3.0 ، لا يزال بإمكانك استخدام الحدث المعروض ولكنك ستستخدمه كما يلي:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

راجع مستندات Bootstrap 3.0 هنا ضمن "الأحداث".

271
Arun P Johny

يمكنك استخدام show بدلاً من shown لجعل الوظيفة يتم تحميلها قبل فتح مشروط ، بدلاً من فتح مشروط.

$('#code').on('show.bs.modal', function (e) {
  // do something...
})
8
Atchyut Nagabhairava

Bootstrap مشروط يكشف الأحداث. استمع إلى الحدث shown مثل هذا

$('#my-modal').on('shown', function(){
  // code here
});
7
Josnidhin