Code example of angularjs modal box

Time:2021-4-4

This article mainly introduces the code example of angularjs modal box. The example code is introduced in great detail, which has a certain reference learning value for everyone’s study or work. Friends in need can refer to it

Write HTML page

1. Trigger the click event of modal box


<div>
<button type="button" ng-click="openAddModal()" data-toggle="modal"
data-target="#documentOprModal" style="margin-left: 10px;float:left">
<i></i>{{ 'i18n.add' | translate }}
</button>
</div>

2. modal box page

<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  data-backdrop="static" data-keyboard="false">
  <div role="document" style="width: 600px;">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">×</span></button>
        < H4 > document warehousing
      </div>
      <div>
        <! -- Development -- >
        <form name="docForm" novalidate>
          <! -- Classification -- >
          <div>
            < label style = "padding: 0;" > classification: < / label >
            <div>
              <div>
                <input type="text" ng-model="document.classification_name"
                  Placeholder = "select category" >
                <div>
                  <button type="button" style="height: 30px"
                    ng-click="toggleDetail()"> <span></span></button>
                </div>
              </div>
              <div ng-show="isShowDetail" style="position: absolute;z-index: 9999;width: 560px;">
                <div>
                  <div>
                    <div>
                      <ul></ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <! -- star level -- >
          <div>
            < label style = "padding: 0;" > star level: < / label >
            <div>
              <ui-select ng-model="document.starGrade" theme="selectize">
                < UI select Match placeholder ">"
                  <span ng-bind="$select.selected.name"></span>
                </ui-select-match>
                <ui-select-choices
                  repeat="item.id as item in (starGrades | filter: $select.search) track by $index ">
                  <div ng-bind-html="item.name | highlight: $select.search"></div>
                </ui-select-choices>
              </ui-select>
            </div>
          </div>
          <! -- well number -- >
          <div>
            < label for = "jhtext" > well number: < / label >
            <input type="text" ng-model="document.jh">
          </div>
          <! -- author -- >
          <div>
            < label for = "authortext" > Author: < / label >
            <input type="text" ng-model="document.author">
          </div>
          <! -- Unit -- >
          <div>
            Unit: < / label >
            <input type="text" ng-model="document.unit">
          </div>
          <! -- date -- >
          <div>
            < label for = "writedate" > date of writing: < / label >
            <input type="date" ng-model="document.writeDate">
          </div>
          <! -- Introduction -- >
          <div>
            < label for = "introductiontextarea" > Introduction: < / label >
            <textarea ng-model="document.introduction"
              rows="5" cols="60"></textarea>
          </div>
          <! -- possible query keywords -- >
          <div>
            < label for = "keypackagetextarea" > possible query keywords: < / label >
            <textarea ng-model="document.keyPackage" rows="5"
              cols="60"></textarea>
          </div>
          <! -- File -- >
          <div>
            <div>
              <input type="file" name="file">
            </div>
          </div>
        </form>
      </div>
      <div>
        <button type="button" ng-click="submitFileInfo()"><i></i>{{ 'i18n.save'
          | translate }}
        </button>
        <button type="button" data-dismiss="modal" style="margin: 0px 20px;"><i
           ></i>{{
          'i18n.cancel' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>

3. Write the corresponding JS

/**
         *Click add event to open the mode box
         */
        function openAddModal() {
          $('#documentOprModal').modal({
            show: true,
            keyboard: false,
            backdrop: 'static'
          });
        }

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.