मोडल
प्रकाशपेटिकाः, उपयोक्तृसूचनाः, अथवा पूर्णतया अनुकूलितसामग्रीणां कृते स्वसाइट् मध्ये संवादं योजयितुं Bootstrap इत्यस्य JavaScript मोडल् प्लगिन् उपयुज्यताम् ।
कथं कार्यं करोति
Bootstrap इत्यस्य modal घटकेन सह आरम्भात् पूर्वं निम्नलिखितम् अवश्यं पठन्तु यतः अस्माकं मेनू विकल्पाः अद्यतने परिवर्तिताः सन्ति ।
- मोडल्स् HTML, CSS, JavaScript इत्यनेन सह निर्मिताः सन्ति । ते दस्तावेजे अन्यत् सर्वं उपरि स्थिताः सन्ति तथा च स्क्रॉलं निष्कासयन्ति
<body>
येन मोडल सामग्री तस्य स्थाने स्क्रॉलं करोति। - मोडल् “backdrop” इत्यत्र क्लिक् कृत्वा स्वयमेव मोडल् बन्दं भविष्यति ।
- बूटस्ट्रैप् एकस्मिन् समये केवलं एकं मोडल् विण्डो समर्थयति । नेस्टेड् मोडाल्स् समर्थिताः न सन्ति यतः वयं तान् दुर्बलाः उपयोक्तृअनुभवाः इति मन्यामहे।
- Modals use
position: fixed
, यत् कदाचित् तस्य प्रतिपादनस्य विषये किञ्चित् विशेषं भवितुम् अर्हति । यदा यदा सम्भवं भवति तदा अन्येभ्यः तत्त्वेभ्यः सम्भाव्यहस्तक्षेपं परिहरितुं स्वस्य मोडल HTML शीर्षस्तरीयस्थाने स्थापयन्तु ।.modal
अन्यस्य नियततत्त्वस्य अन्तः एकं नेस्ट् कृत्वा भवन्तः सम्भवतः समस्यासु धावन्ति । - पुनः, कारणतः
position: fixed
, चलयन्त्रेषु मोडालस्य उपयोगेन सह केचन चेतावनीः सन्ति । विस्तरेण ज्ञातुं अस्माकं ब्राउज़र समर्थन डॉक्स पश्यन्तु। - HTML5 इत्यनेन स्वस्य शब्दार्थं कथं परिभाषयति इति कारणतः Bootstrap modals इत्यत्र
autofocus
HTML विशेषतायाः कोऽपि प्रभावः नास्ति । समानं प्रभावं प्राप्तुं, किञ्चित् कस्टम् जावास्क्रिप्ट् उपयुज्यताम् :
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
मीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु
.
डेमो तथा उपयोग मार्गदर्शिकाओं के लिए पढ़ते रहें।
उदाहरणानि
मोडल घटक
अधः स्थिरं मोडल उदाहरणम् (अर्थात् its position
and display
have been overridden) अस्ति । अत्र मोडल हेडर, मोडल बॉडी (required for padding
), मोडल पादलेखः (वैकल्पिकः) च समाविष्टाः सन्ति । वयं याचयामः यत् भवान् यदा सम्भवं तदा निष्कासनक्रियाभिः सह मोडलशीर्षकाणि समाविष्टं करोतु, अथवा अन्यां स्पष्टनिवृत्तिक्रियाम् अयच्छतु ।
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<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">×</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-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
लाइव डेमो
अधोलिखितं बटनं नुत्वा कार्यरतं मोडल डेमो टॉगल कुर्वन्तु। पृष्ठस्य उपरितः अधः स्लाइड् कृत्वा क्षीणं भविष्यति ।
<!-- 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" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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>
स्थिर पृष्ठभूमि
यदा backdrop static इति सेट् भवति तदा तस्य बहिः क्लिक् करणसमये modal न बन्दं भविष्यति । तस्य प्रयोगार्थं अधोलिखितं बटनं नुदन्तु ।
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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">Understood</button>
</div>
</div>
</div>
</div>
दीर्घ सामग्री स्क्रॉल करना
यदा मोडाल्स् उपयोक्तुः दृश्यपोर्ट् अथवा यन्त्रस्य कृते अतिदीर्घाः भवन्ति तदा ते पृष्ठात् एव स्वतन्त्रतया स्क्रॉल कुर्वन्ति । अस्माकं अभिप्रायः किम् इति द्रष्टुं अधोलिखितं डेमो प्रयतस्व।
.modal-dialog-scrollable
भवन्तः एकं स्क्रॉल-योग्यं मोडल् अपि निर्मातुम् अर्हन्ति यत् मोडल-शरीरं स्क्रॉल कर्तुं शक्नोति , इत्यत्र योजयित्वा .modal-dialog
।
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
ऊर्ध्वाधर केन्द्रित
मोडल को लम्बवत केन्द्रित करने के .modal-dialog-centered
लिए to जोड़ें ।.modal-dialog
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
टूलटिप्स एवं पोपोवर
आवश्यकतानुसारं टूलटिप्स, पोपोवर्स् च मोडल्स् इत्यस्य अन्तः स्थापयितुं शक्यन्ते । यदा मोडाल्स् बन्दाः भवन्ति तदा अन्तः यत्किमपि टूल्टिप्स्, पोपोवर्स् च स्वयमेव निष्कासिताः भवन्ति ।
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
जालस्य उपयोगेन
अन्तः नेस्टिंग् कृत्वा एकस्य मोडलस्य अन्तः Bootstrap जालप्रणाल्याः उपयोगं .container-fluid
कुर्वन्तु .modal-body
। ततः, सामान्यजालप्रणालीवर्गाणां उपयोगं यथा अन्यत्र करोषि ।
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
भिन्न-भिन्न मोडल सामग्री
बटनस्य एकः गुच्छः अस्ति यत् सर्वे किञ्चित् भिन्नसामग्रीभिः सह समानं मोडलं प्रेरयन्ति? उपयोगं event.relatedTarget
तथा HTML data-*
विशेषताः (संभवतः jQuery मार्गेण ) मोडलस्य सामग्रीं परिवर्तयितुं यत् बटनं क्लिक् कृतम् इति अवलम्ब्य ।
अधः लाइव डेमो अस्ति तदनन्तरं उदाहरणं HTML तथा JavaScript अस्ति। अधिकविवरणार्थं, विषये विवरणार्थं modal events docs पठन्तुrelatedTarget
।
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
एनिमेशनं परिवर्तयन्तु
चर मोडल फेड-इन एनिमेशन के पूर्व $modal-fade-transform
के परिवर्तन अवस्था निर्धारित करता है , चर मोडल फेड-इन एनिमेशन के अन्त में के रूपांतरण निर्धारित करता है ।.modal-dialog
$modal-show-transform
.modal-dialog
यदि भवान् उदाहरणार्थं zoom-in animation इच्छति तर्हि भवान् $modal-fade-transform: scale(.8)
.
एनिमेशन को हटा दें
दृश्यार्थं फीका भवितुं न अपितु केवलं दृश्यमानानां मोडालानां कृते, .fade
स्वस्य मोडल मार्कअपतः वर्गं निष्कासयन्तु ।
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
गतिशील ऊर्ध्वताः
यदि कस्यचित् मोडलस्य ऊर्ध्वता उद्घाटिते सति परिवर्तते तर्हि भवन्तः $('#myModal').modal('handleUpdate')
स्क्रॉलबारः दृश्यते चेत् मोडलस्य स्थितिं पुनः समायोजयितुं आह्वानं कुर्वन्तु ।
सुलभता
अवश्यं योजयन्तु aria-labelledby="..."
, मोडल शीर्षकस्य सन्दर्भं दत्त्वा, .modal
. aria-describedby
तदतिरिक्तं, भवान् on इत्यनेन सह स्वस्य मोडल संवादस्य वर्णनं दातुं शक्नोति .modal
। ध्यानं कुर्वन्तु यत् भवद्भिः योजयितुं आवश्यकता नास्ति role="dialog"
यतः वयं पूर्वमेव जावास्क्रिप्ट् मार्गेण योजयामः ।
यूट्यूब विडियो एम्बेड करना
यूट्यूब-वीडियो-इत्येतत् मोडल्-मध्ये एम्बेड्-करणार्थं स्वयमेव प्लेबैक्-स्थगितुं Bootstrap-मध्ये न अतिरिक्त-जावास्क्रिप्ट्-इत्यस्य आवश्यकता वर्तते । अधिकसूचनार्थं एतत् सहायकं Stack Overflow पोस्ट पश्यन्तु।
वैकल्पिक आकार
मोडल्स् मध्ये त्रयः वैकल्पिकाः आकाराः सन्ति, ये एकस्मिन् स्थापनार्थं परिवर्तकवर्गाणां माध्यमेन उपलभ्यन्ते .modal-dialog
। एते आकाराः संकीर्णतरदृश्यपोर्टेषु क्षैतिजस्क्रॉलबारं परिहरितुं कतिपयेषु विच्छेदबिन्दुषु किक-इनं कुर्वन्ति ।
आकृति | श्रेणी | मोडल अधिकतम-चौड़ाई |
---|---|---|
लघु | .modal-sm |
300px |
मूलभूतम् | न कश्चित् | 500px |
बृहत् | .modal-lg |
800px |
अतिरिक्त विशाल | .modal-xl |
1140px |
अस्माकं पूर्वनिर्धारितं मोडल विना मोडिफायर क्लास् “मध्यम” आकारस्य मोडल् इत्यस्य निर्माणं करोति ।
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
प्रयोगः
मोडल प्लगिन् भवतः गुप्तसामग्री आग्रहेण, आँकडा विशेषताभिः अथवा जावास्क्रिप्ट् मार्गेण टोग्ल् करोति । .modal-open
इदं to <body>
override default scrolling behavior इत्यत्र अपि योजयति तथा .modal-backdrop
च modal इत्यस्य बहिः क्लिक् करणसमये दर्शितानां मोडाल्स् इत्यस्य निराकरणार्थं क्लिक् क्षेत्रं प्रदातुं a जनयति ।
डेटा विशेषताओं के माध्यम से
जावास्क्रिप्ट् लिखित्वा विना एकं मोडल् सक्रियं कुर्वन्तु। data-toggle="modal"
बटन इव नियन्त्रकतत्त्वे सेट् कुर्वन्तु, एकेन सह data-target="#foo"
अथवा href="#foo"
टोग्ल् कर्तुं विशिष्टं मोडल् लक्ष्यं कर्तुं ।
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
जावास्क्रिप्ट् मार्गेण
myModal
जावास्क्रिप्ट् इत्यस्य एकपङ्क्तौ id इत्यनेन सह मोडल् आह्वयन्तु :
$('#myModal').modal(options)
विकल्पाः
विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-
योजयन्तु data-backdrop=""
।
नामः | प्रकारः | मूलभूतम् | वर्णनम् |
---|---|---|---|
पृष्ठभूमिः | बूलेन वा तारः'static' |
सत्यम् | एकं मोडल-पृष्ठभूमितत्त्वं समावेशयति। वैकल्पिकरूपेण, static एकस्य पृष्ठभूमिस्य कृते निर्दिशतु यत् क्लिक् इत्यत्र मोडल् न बन्दं करोति । |
कीबोर्ड | बूलियन इति | सत्यम् | escape कील दबाने पर मोडल बन्द करता है |
केंद्रबिन्दुः | बूलियन इति | सत्यम् | आरम्भे मोडल इत्यत्र ध्यानं स्थापयति । |
दर्शयतु | बूलियन इति | सत्यम् | आरम्भे मोडल दर्शयति । |
विधियाँ
अतुल्यकालिक विधियाँ एवं संक्रमण
सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .
.modal(options)
भवतः सामग्रीं मोडलरूपेण सक्रियं करोति। एकं वैकल्पिकं विकल्पं स्वीकुर्वति object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
एकं मोडलं मैन्युअल् रूपेण टॉगल करोति। मोडलस्य वास्तविकरूपेण दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.modal
or hidden.bs.modal
घटनायाः भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।
$('#myModal').modal('toggle')
.modal('show')
मैन्युअल् रूपेण एकं मोडल् उद्घाटयति। मोडालस्य वास्तविकरूपेण दर्शितस्य पूर्वं (अर्थात् shown.bs.modal
घटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।
$('#myModal').modal('show')
.modal('hide')
एकं मोडलं मैन्युअल् रूपेण गोपयति। मोडालस्य वास्तविकरूपेण गोपनात् पूर्वं (अर्थात् hidden.bs.modal
घटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।
$('#myModal').modal('hide')
.modal('handleUpdate')
यदि मोडलस्य ऊर्ध्वता उद्घाटिते सति परिवर्तते (अर्थात् स्क्रॉलबारः दृश्यते चेत्) मोडलस्य स्थितिं मैन्युअल् रूपेण पुनः समायोजयन्तु ।
$('#myModal').modal('handleUpdate')
.modal('dispose')
एकस्य तत्त्वस्य मोडलं नष्टं करोति।
घटनाः
बूटस्ट्रैप् इत्यस्य मोडलवर्गः मोडलकार्यक्षमतायां हुक् करणाय कतिपयानि घटनानि उजागरयति । सर्वाणि मोडलघटनानि मोडलस्यैव उपरि (अर्थात् <div class="modal">
) प्रज्वलितानि भवन्ति ।
घटना प्रकार | वर्णनम् |
---|---|
show.bs.modal इति दर्शयतु | एषा घटना तत्क्षणमेव प्रज्वलति यदा show दृष्टान्तविधिः आह्वयते । यदि क्लिक् कारणेन भवति तर्हि क्लिक् कृतं तत्त्वं relatedTarget घटनायाः गुणरूपेण उपलभ्यते । |
दर्शितम्.bs.modal | इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रे दृश्यमानं कृतम् अस्ति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) । यदि क्लिक् कारणेन भवति तर्हि क्लिक् कृतं तत्त्वं relatedTarget घटनायाः गुणरूपेण उपलभ्यते । |
hide.bs.modal इति | इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः hide आहूता अस्ति । |
छिपे हुए.bs.modal | इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रेण गोपनीयं समाप्तं भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) । |
hidePrevented.bs.मोडल इति | इदं घटना तदा प्रज्वलितं भवति यदा मोडल् दर्शितं भवति, तस्य पृष्ठभूमिः भवति static तथा च मोडालस्य बहिः क्लिक् अथवा एस्केप् कील-प्रेस् कीबोर्ड विकल्पेन सह अथवा data-keyboard , इति सेट् कृत्वा क्रियते false । |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})