މޮޑަލް އެވެ

ލައިޓްބޮކްސް، ޔޫޒަރ ނޮޓިފިކޭޝަން ނުވަތަ މުޅިން ކަސްޓަމް ކޮންޓެންޓް ހޯދުމަށް ސައިޓަށް ޑައިލޮގްތައް އިތުރު ކުރުމަށް ބޫޓްސްޓްރެޕްގެ ޖާވާސްކްރިޕްޓް މޮޑަލް ޕްލަގިން ބޭނުން ކުރާށެވެ.

އެކަން ކުރާ ގޮތް

ބޫޓްސްޓްރެޕްގެ މޮޑަލް ކޮމްޕޮނެންޓް ފެށުމުގެ ކުރިން އަޅުގަނޑުމެންގެ މެނޫ އޮޕްޝަންތަކަށް ދާދިފަހުން ބަދަލުވެފައިވާތީ ތިރީގައިވާ ކަންކަން ކިޔުން ޔަގީން ކުރައްވާށެވެ.

މޮޑަލްތައް ބިނާކޮށްފައިވަނީ އެޗްޓީއެމްއެލް، ސީއެސްއެސް، އަދި ޖާވާސްކްރިޕްޓް އިންނެވެ. އެމީހުން ޑޮކިއުމަންޓްގައިވާ އެހެން ހުރިހާ އެއްޗެއްގެ މައްޗަށް ޕޮޒިޝަންކޮށްފައި ހުންނައިރު ސްކްރޯލް ނައްތާލާފައި ހުންނަނީ <body>މޮޑަލް ކޮންޓެންޓް އޭގެ ބަދަލުގައި ސްކްރޯލް ވާނެ ގޮތަކަށެވެ.
މޮޑަލް “ބެކްޑްރޯޕް” އަށް ކްލިކް ކުރުމުން އޮޓޮމެޓިކުން މޮޑަލް ބަންދުވާނެއެވެ.
ބޫޓްސްޓްރެޕް އެއްފަހަރާ ސަޕޯޓް ކުރަނީ އެންމެ މޮޑަލް ވިންޑޯއެކެވެ. ނެސްޓްޑް މޮޑަލްތަކަކީ ޔޫޒަރުންގެ ތަޖުރިބާތައް ދަށް ކަމަށް އަޅުގަނޑުމެން ގަބޫލުކުރާތީ ސަޕޯޓް ނުކުރާ މޮޑަލްތަކެކެވެ.
މޮޑަލްސް ބޭނުން ކުރަނީ position: fixed, މިއީ ބައެއް ފަހަރު އޭގެ ރެންޑަރިންގ އާއި ބެހޭގޮތުން ތަންކޮޅެއް ވަކި ގޮތަކަށް ވެދާނެ ކަމެކެވެ. ވީހާވެސް ގިނައިން ތިމާގެ މޮޑަލް އެޗްޓީއެމްއެލް މަތީ ފެންވަރުގެ މަގާމެއްގައި ބަހައްޓައިގެން އެހެން އުފެއްދުންތަކުގެ ސަބަބުން ކުރިމަތިވެދާނެ ތަދައްޚުލުވުންތަކުން ސަލާމަތްވެވޭނެއެވެ. .modalއެހެން ފިކްސްޑް އެލިމެންޓެއްގެ ތެރޭގައި ނެސްޓް ކުރާއިރު މައްސަލަތަކެއް ދިމާވުން އެކަށީގެންވެއެވެ .
އަނެއްކާވެސް , ގެ ސަބަބުން position: fixedމޯބައިލް ޑިވައިސްތަކުގައި މޮޑަލް ބޭނުންކުރުމާ ގުޅޭގޮތުން ބައެއް ކެވިއޭޓްތައް އެބަހުއްޓެވެ. ތަފްސީލު ހޯދުމަށް އަޅުގަނޑުމެންގެ ބްރައުޒާ ސަޕޯޓް ޑޮކްސް ބައްލަވާށެވެ .
އެޗްޓީއެމްއެލް5 އިން އޭގެ ސެމެންޓިކްސް މާނަކުރާ ގޮތުގެ ސަބަބުން، އެޗްޓީއެމްއެލް autofocusއެޓްރިބިއުޓް އަށް ބޫޓްސްޓްރެޕް މޮޑަލްތަކުގައި އެއްވެސް އަސަރެއް ނުކުރެއެވެ. ހަމަ އެ އަސަރު ހާސިލް ކުރުމަށްޓަކައި، ކޮންމެވެސް ކަސްޓަމް ޖާވާސްކްރިޕްޓެއް ބޭނުން ކުރާށެވެ:

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

މި ކޮމްޕޮނެންޓްގެ އެނިމޭޝަން އިފެކްޓް ބިނާވެފައިވަނީ prefers-reduced-motionމީޑިއާ ކިއުއަރީގެ މައްޗަށެވެ. އަޅުގަނޑުމެންގެ އެކްސެސިބިލިޓީ ޑޮކިއުމަންޓޭޝަންގެ ރިޑޫސްޑް މޮޝަން ބައި ބައްލަވާށެވެ .

ޑެމޯތަކާއި ބޭނުންކުރުމުގެ ގައިޑްލައިންތަކަށް ކިޔަމުން ގެންދާށެވެ.

މިސާލުތަކެވެ

ތިރީގައި މިވަނީ ސްޓޭޓިކް މޯޑަލް މިސާލެއް (މާނައަކީ އޭގެ positionއަދި displayއޯވަރރައިޑް ކުރެވިފައިވާ ކަމެވެ). އޭގެ ތެރޭގައި މޮޑަލް ހެޑަރ، މޮޑަލް ބޮޑީ (އަށް ބޭނުންވާ 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">&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-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">&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="#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">&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">Understood</button>
      </div>
    </div>
  </div>
</div>

ދިގު ކޮންޓެންޓް ސްކްރޯލް ކުރުން

މޮޑަލްތައް ޔޫޒަރުގެ ވިއުޕޯޓަށް ނުވަތަ ޑިވައިސްއަށް މާ ދިގުވެއްޖެނަމަ، އެ މޮޑަލްތައް ސްކްރޯލް ކުރަނީ ޚުދު ޕޭޖުން މިނިވަންވެގެންނެވެ. އަޅުގަނޑުމެން މާނަކުރާ އެއްޗެއް ބަލާލުމަށް ތިރީގައިވާ ޑެމޯ ޓްރައިކޮށްލައްވާށެވެ.