ሞዳል

ለብርሃን ሳጥኖች፣ የተጠቃሚ ማሳወቂያዎች ወይም ሙሉ ለሙሉ ብጁ ይዘት ወደ ጣቢያዎ መገናኛዎችን ለመጨመር የBootstrapን ጃቫስክሪፕት ሞዳል ተሰኪን ይጠቀሙ።

እንዴት እንደሚሰራ

በBootstrap ሞዳል አካል ከመጀመራችን በፊት፣የእኛ ምናሌ አማራጮች በቅርብ ጊዜ ስለተቀየሩ የሚከተለውን ማንበብዎን እርግጠኛ ይሁኑ።

ሞዳልሎች በኤችቲኤምኤል፣ ሲኤስኤስ እና ጃቫስክሪፕት የተገነቡ ናቸው። እነሱ በሰነዱ ውስጥ ካሉት ሁሉም ነገሮች ላይ ተቀምጠዋል እና <body>በምትኩ የሞዳል ይዘት እንዲሸብልል ጥቅልሉን ያስወግዱት።
ሞዳል "backdrop" ላይ ጠቅ ማድረግ ሞዳልን በራስ-ሰር ይዘጋል.
Bootstrap በአንድ ጊዜ አንድ ሞዳል መስኮት ብቻ ነው የሚደግፈው። ደካማ የተጠቃሚ ተሞክሮዎች ናቸው ብለን ስለምናምን የጎጆ ሞዳልሎች አይደገፉም።
ሞዳሎች ይጠቀማሉ position: fixed፣ ይህም አንዳንድ ጊዜ ስለ አሠራሩ ትንሽ የተለየ ሊሆን ይችላል። በሚቻልበት ጊዜ ከሌሎች አካላት ሊደርስ የሚችለውን ጣልቃገብነት ለማስወገድ የእርስዎን ሞዳል HTML በከፍተኛ ደረጃ ያስቀምጡት። .modalበሌላ ቋሚ ኤለመንት ውስጥ ሲሰቅሉ ችግሮች ሊያጋጥሙዎት ይችላሉ ።
አሁንም በድጋሚ፣ position: fixedበ ተንቀሳቃሽ መሳሪያዎች ላይ ሞዳልሎችን ስለመጠቀም አንዳንድ ማስጠንቀቂያዎች አሉ። ለዝርዝሮች የእኛን የአሳሽ ድጋፍ ሰነዶች ይመልከቱ።
ኤችቲኤምኤል 5 የትርጓሜውን ትርጉም እንዴት እንደሚገልፅ ምክንያት የኤችቲኤምኤል ባህሪው በ autofocusBootstrap ሞዳሎች ላይ ምንም ተጽእኖ የለውም። ተመሳሳዩን ውጤት ለማግኘት አንዳንድ ብጁ ጃቫስክሪፕት ይጠቀሙ፡

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

ማሳያዎችን እና የአጠቃቀም መመሪያዎችን ማንበብዎን ይቀጥሉ።

ምሳሌዎች

ከታች የማይንቀሳቀስ ሞዳል ምሳሌ ነው (ትርጉሙ positionእና displayተሽሯል)። የሞዳል ራስጌ፣ የሞዳል አካል (የሚፈለገው padding) እና ሞዳል ግርጌ (አማራጭ) ተካትተዋል። በተቻለ መጠን የሞዳል ራስጌዎችን ከሥራ ማሰናበት እርምጃዎች ጋር እንዲያካትቱ ወይም ሌላ ግልጽ የሆነ የስንብት እርምጃ እንዲያቀርቡ እንጠይቅዎታለን።

<div class="modal" tabindex="-1" role="dialog">
  <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>

የቀጥታ ማሳያ

ከታች ያለውን አዝራር ጠቅ በማድረግ የስራ ሞዳል ማሳያ ቀይር። ወደ ታች ይንሸራተታል እና ከገጹ አናት ላይ ይደበዝዛል።

<!-- 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">
        <h5 class="modal-title" id="exampleModalLabel">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">
        ...
      </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="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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">
        ...
      </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>

በአቀባዊ ያማከለ

.modal-dialog-centeredሞጁሉን በአቀባዊ ወደ .modal-dialogመሃል ያክሉት ።

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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">
        ...
      </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>

የመሳሪያ ምክሮች እና ፖፖቨርስ

እንደ አስፈላጊነቱ የመሳሪያ ምክሮች እና ፖፖቨርስ በሞዳልሎች ውስጥ ሊቀመጡ ይችላሉ። ሞዱሎች ሲዘጉ፣ ውስጥ ያሉ ማንኛቸውም የመሳሪያ ምክሮች እና ብቅ-ባዮች እንዲሁ ወዲያውኑ ይሰረዛሉ።

<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 ባህሪያትን ይጠቀሙ (ምናልባትም በ jQuery )።data-*

ከዚህ በታች በምሳሌ ኤችቲኤምኤል እና ጃቫስክሪፕት የተከተለ የቀጥታ ማሳያ ነው። ለተጨማሪ መረጃ በ ላይ ዝርዝሮችን ለማግኘት የሞዳል ዝግጅቶችን ሰነዶች ያንብቡ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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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)
})

እነማ አስወግድ

ለማየት ከመደበዝ ይልቅ በቀላሉ ለሚታዩ ሞዳሎች፣ .fadeክፍሉን ከሞዳል ምልክትዎ ያስወግዱት።

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

ተለዋዋጭ ቁመቶች

የሞዳል ሞዳል ክፍት ሲሆን ከፍታው ከተቀየረ $('#myModal').modal('handleUpdate')የማሸብለል አሞሌ ከታየ የሞዳልሉን ቦታ ለማስተካከል መደወል አለብዎት።

ተደራሽነት

የሞዳል ርዕስን ወደ ፣ እና role="dialog"ወደ ራሱ በመጥቀስ aria-labelledby="..."ማከልዎን ያረጋግጡ ። በተጨማሪም፣ የሞዳል ንግግርዎን በ ላይ መግለጫ መስጠት ይችላሉ ።.modalrole="document".modal-dialogaria-describedby.modal

የዩቲዩብ ቪዲዮዎችን በማካተት ላይ

የዩቲዩብ ቪዲዮዎችን በሞዳል ውስጥ መክተት መልሶ ማጫወትን እና ሌሎችንም በራስ ሰር ለማቆም በ Bootstrap ውስጥ የሌለ ተጨማሪ ጃቫ ስክሪፕት ያስፈልገዋል። ለበለጠ መረጃ ይህንን ጠቃሚ የቁልል ፍሰት ልጥፍ ይመልከቱ።

አማራጭ መጠኖች

ሞዳሎች ሁለት የአማራጭ መጠኖች አሏቸው፣ በአሻሽያ ክፍሎች በኩል በ ሀ ላይ ሊቀመጡ ይችላሉ .modal-dialog። እነዚህ መጠኖች በጠባብ መመልከቻዎች ላይ አግድም ማሸብለልን ለማስቀረት በተወሰኑ መግቻ ነጥቦች ላይ ይጀምራሉ።

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

አጠቃቀም

የሞዳል ፕለጊን ድብቅ ይዘትዎን በፍላጎት ፣በመረጃ ባህሪዎች ወይም በጃቫስክሪፕት በኩል ይቀየራል። እንዲሁም ነባሪ የማሸብለል ባህሪን ለመሻር ይጨምራል እና .modal-openከሞዳል ውጭ ጠቅ ሲያደርጉ የሚታዩ ሞዳሎችን ለማሰናበት የጠቅ ቦታን ያመነጫል።<body>.modal-backdrop

በውሂብ ባህሪያት በኩል

ጃቫ ስክሪፕት ሳይጽፉ ሞዳልን ያግብሩ። አንድን ወይም የተወሰነ ሞዳል ለመቀያየር ዒላማ ለማድረግ በተቆጣጣሪ data-toggle="modal"ኤለመንት ላይ እንደ አዝራር ያቀናብሩ ።data-target="#foo"href="#foo"

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

በጃቫስክሪፕት በኩል

myModalከአንድ የጃቫ ስክሪፕት መስመር ጋር አንድ ሞዳል መታወቂያ ይደውሉ

$('#myModal').modal(options)

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-backdrop=""።

ስም	ዓይነት	ነባሪ	መግለጫ
ዳራ	ቡሊያን ወይም ሕብረቁምፊው`'static'`	እውነት ነው።	ሞዳል-backdrop አባልን ያካትታል። በአማራጭ፣ `static`ጠቅ ሲደረግ ሞዳልን የማይዘጋው ለጀርባ ይግለጹ።
የቁልፍ ሰሌዳ	ቡሊያን	እውነት ነው።	የማምለጫ ቁልፍ ሲጫን ሞዳልን ይዘጋል።
ትኩረት	ቡሊያን	እውነት ነው።	ሲጀመር ትኩረቱን በሞዳል ላይ ያስቀምጣል.
አሳይ	ቡሊያን	እውነት ነው።	ሲጀመር ሞዳልን ያሳያል።

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ ያለው ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ።

`.modal(options)`

ይዘትዎን እንደ ሞዳል ያነቃዋል። አማራጭ አማራጮችን ይቀበላል object።

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

ሞዳልን በእጅ ይቀየራል። ሞጁሉ በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደshown.bs.modal ደዋዩ ይመለሳል 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">)።

የክስተት አይነት	መግለጫ
አሳይ.bs.ሞዳል	`show`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲ��ውኑ ይቃጠላል . በአንድ ጠቅታ ከተከሰተ፣ ጠቅ የተደረገው አካል እንደ `relatedTarget`የዝግጅቱ ንብረት ይገኛል።
የሚታየው.bs.modal	ይህ ክስተት ሞጁሉ ለተጠቃሚው እንዲታይ ከተደረገ (የ CSS ሽግግሮች እስኪጠናቀቅ ድረስ ይጠብቃል) ይባረራል። በአንድ ጠቅታ ከተከሰተ፣ ጠቅ የተደረገው አካል እንደ `relatedTarget`የዝግጅቱ ንብረት ይገኛል።
ደብቅ.bs.modal	`hide`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የተደበቀ.bs.modal	ሞዱሉ ከተጠቃሚው ተደብቆ ሲጠናቀቅ ይህ ክስተት የሚነድ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።

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

ሞዳል