<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      泉州設計公司:用Bootstrap顯示JavaScript模式窗口

      日期:2020-03-27 閱讀:257   作者:泉州網站設計開發公司

      的確,自助游已經發展到包括來自全球各地的支持者。Bootstrap 3發布計劃我想詳細討論一個主題。Bootstrap JavaScript效果對開發人員并不總是有用的,所以JS文件不是運行整個框架所必需的,但是它們確實提供了更快的特性來定義公共UI元素,而不必重新創建輪子。

      我想把本教程集中在一個典型的網頁中使用模態窗口。我們泉州設計公司只需要在引導框架中包含兩個文件。JS代碼不太復雜,無法理解。我的示例演示允許用戶動態地更新背景顏色,因此,這確實需要更多的示例JS。是一個很好的介紹添加這些簡短的組件到任何普通網站。

      泉州設計公司


      抓取檔案


      出發下載引導程序的副本直接關閉GITHUB。這將包括“Bootstrap。CSS”和“Bootstrap。M.js”文件,這些文件是我在自己的演示中添加的。如果文件大小有問題,則可以下載。BooTras-MODAL.JS文件只允許與模態窗口相關的JavaScript空間。擴展Bootstrap模態類包括響應性設計和其他一些好的特性。

      但是我將使用完全的Bootstrap JS文件,它們完全相同?,F在我們需要將這些文件包含到默認的HTML5布局中。我已經復制了我的頭代碼,這些代碼也引用了類似的外部文檔。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      Twelve
      Thirteen
      Fourteen
      Fifteen
      Sixteen
      Seventeen
      <!doctype html>
      <HTMLlang="en-US" &#62;
      <頭部>
        <metahttp-equiv="Content-Type"content="text/html;charset=utf-8" &#62;
        <title>Demo Modal Windows via Bootstrap</title &#62;
        <meta姓名=“作者”content="Jake Rocheleau" &#62;
        <linkrel=“快捷圖標”href="https://www.vandelaydesign.com/favicon.ico" &#62;
        <linkrel=“圖標”href="https://www.vandelaydesign.com/favicon.ico" &#62;
        <linkrel=“樣式表”type="text/css"媒體=“全部”href="css/bootstrap.css" &#62;
        <linkrel=“樣式表”type="text/css"媒體=“全部”href="css/default.css" &#62;
        <script類型="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script &#62;
        <script類型="text/javascript"charset="utf-8"SRC=“JS/Bootstrap,M.js”></腳本>
        <script類型="text/javascript"charset="utf-8"SRC="js/modals.js"></腳本>
      <!--[if lt IE 9]>
        <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      </頭部>

      這個布局的核心CSS文件被稱為default.css我還包括了一些改寫模態窗口默認引導設計的樣式。modals.js該文件還具有自定義模式窗口。該文件還具有自定義功能,由我編寫,以節省時間與接口功能。但我們可以進入JavaScript以后,首先我們應該深入到頁面正文內容和結構。

      WebPage Body HTML

      主體部分的兩個大部件是觸發器按鈕,加上模態窗口本身。我們應該從按鈕鏈接開始分解每一個部件。

      ?
      One
      Two
      Three
      Four
      Five
      <機構>
        <aHREF="#modalwin"data-toggle="modal"="btn btn-large">Display Window</>
        <aHREF="#bgchangemodal"data-toggle="modal"="btn btn-large">Update the Background</>
      </機構>

      這兩個按鈕將在演示頁面的中心找到。每一個鏈接到一個模態窗口,該窗口實際上被編碼到HTML頁面中。Bootstrap允許開發人員使用本地HTML加載模態窗口,或者通過Ajax包含一個遠程文件。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      Twelve
      Thirteen
      Fourteen
      Fifteen
      Sixteen
      Seventeen
      Eighteen
      Nineteen
      Twenty
      Twenty-one
      <!-- first modal window -->
      <divid="modalwin"=“模態隱藏漸變”role="dialog"詠嘆調="myModalLabel"aria-hidden="true" &#62;
        <header=“模態頭”>
          <aHREF=&#34;Wei&#34;class="close"數據解散=“情態”>x</>
          <h3>Prepare to be Amazed <small>or easily amused :]</small></h3 &#62;
        </header &#62;
        <div="modal-body">
          <p>This is a generic modal window, but look we can add images!</small></p &#62;
          <p><imgSRC=“圖像/ jim dwight辦公室PNG”alt="Jim and Dwight from NBC's The Office"頭銜=“吉姆和德懷特”class="img-rounded"></p &#62;
          <p>Close me by clicking anywhere outside the window, or by clicking the blue button.</p &#62;
          <p></p &#62;
        </div &#62;
        <footer="modal-footer">
          <aHREF=&#34;Wei&#34;class="btn btn-primary"身份證件=“OkWun01”>Sounds Good!</>
        </footer &#62;
      </div> <!-- @end @modalwin -->

      我的第一個示例只是帶有一個圖像文件的基本文本。Bootstrap提供了使用三個不同的部分創建模態窗口的標準:模態頭 ,.modal-body.modal-footer每個類都可以附加到任何HTML元素上,并且應該顯示相同的元素。數據解散 .

      在引導庫中的這些微小的添加使得定制的模態窗口變得非常容易。所有的組件都是現成的,你只需要記?。ɑ虮4妫┐a。在核心外部div元素中,你會發現三個非常重要的類。class=”modal hide fade”包括所有默認設置。讓我們偷看第二模態窗口。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      Twelve
      Thirteen
      Fourteen
      Fifteen
      Sixteen
      Seventeen
      Eighteen
      Nineteen
      Twenty
      Twenty-one
      Twenty-two
      Twenty-three
      Twenty-four
      Twenty-five
      Twenty-six
      Twenty-seven
      Twenty-eight
      Twenty-nine
      Thirty
      Thirty-one
      Thirty-two
      Thirty-three
      Thirty-four
      <!-- BG color modal window -->
      <divid="bgchangemodal"=“模態隱藏褪色黑暗”role="dialog"詠嘆調="bgModalUpdate"aria-hidden="true" &#62;
        <header=“模態頭”>
          <aHREF=&#34;Wei&#34;class="close"數據解散=“情態”>x</>
          <h3>Update the Background <small>just pick a color below</small></h3 &#62;
        </header &#62;
        <div="modal-body">
          <div=“警報警報信息”>
            <aHREF=&#34;Wei&#34;class="close"數據解散=“警戒”>x</>
            選擇單選按鈕并保存更改以查看差異。
          </div &#62;
          <input類型=“無線電”id="bgdefault"姓名="bgradio"checked="checked" &#62;
          <label="bgdefault"><跨度></跨度>Default Color</標簽>
          <input類型=“無線電”id="bgpalegreen"姓名="bgradio">
          <label=“古綠”><跨度></跨度>Pale Green</標簽>
          <input類型=“無線電”id="bgwisteria"姓名="bgradio">
          <label="bgwisteria"><跨度></跨度>Wisteria</標簽>
          <input類型=“無線電”id="bgsaffron"姓名="bgradio">
          <label=“Bgsffffon”><跨度></跨度>Saffron</標簽>
          <input類型=“無線電”id="bgcarnation"姓名="bgradio">
          <label=“狂歡節”><跨度></跨度>Carnation Pink</標簽>
        </div &#62;
        <footer="modal-footer">
          <aHREF=&#34;Wei&#34;class="btn"身份證件=“CeleWi02”>Cancel</>
          <aHREF=&#34;Wei&#34;class="btn btn-primary"身份證件=“OkWi02”>Save Changes</>
        </footer &#62;
      </div> <!-- @end #bgchangemodal -->

      我有非常類似的類和元素放置在這個模式窗口的頁眉和頁腳部分中。內部的正文內容與類有一個小的信息div。.alert-infoBootstrap已經為錯誤警報、警告和其他對話框定制了這些代碼?,F在您將看到我添加了類。黑暗在模態容器上


      在頁面CSS文檔中,我創建了一組新的規則來覆蓋默認的模態樣式。黑暗給這個模式窗口一個更豐富的經驗和自定義輸入形式真正對比了較暗的顏色。這個網筒制品也可以使用復選框

      獨特的CSS樣式

      由于許多重置已經被放置在默認引導樣式表中,所以我的自定義文檔不是很長。我們有一些有用的類來定義自定義輸入和定義較深的模式窗口。它不需要任何額外的CSS來獲得模態窗口的正常工作——但是值得查看我的代碼來查看。你可以如何選擇你自己的模態主題。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      Eleven
      Twelve
      Thirteen
      Fourteen
      Fifteen
      Sixteen
      Seventeen
      Eighteen
      Nineteen
      Twenty
      Twenty-one
      Twenty-two
      Twenty-three
      Twenty-four
      Twenty-five
      /** Bootstrap Dark Modal Styles **/
      .modal-open .modal, .btn:focus {
          概述:!important;
      }
      .modal.dark {背景色:α2D3032; }
      .modal.dark .modal-body {
        背景:40464;
      }
      .modal.dark .modal-header {
        背景:α2D3032;
        邊界底部:1PXsolidα2A2C2E;
      }
      .modal.dark .modal-header hOne, .modal.dark .modal-header hTwo, .modal.dark .modal-header hThree, .modal.dark .modal-header hFour{
        顏色:C·CCC;
      }
      .modal.dark .modal-footer {
        背景:α2D3032;
        邊界頂部:1PXsolidα2A2C2E;
        -webkit-box-shadow:none;
        - MOZ盒陰影:none;
        盒影:none;
      }

      我遵循了原始Twitter Bootstrap CSS文件所采用的特殊性。我們需要確保每個選擇器嵌套得足夠深,成為主要的渲染塊。兩個屬性中沒有顯示的重要關鍵字,但自定義類為您的網站提供了更多的品牌感覺。

      用JavaScript顯示情態動詞

      我們應該跳進我的定制JS文件modals.js這將解釋如何將HTML鏈接和隱藏的窗口組合在一起。因為我們同時查看JQuery和Bootstrap框架代碼,所以我將詳細分解個別代碼段來詳細解釋。

      ?
      One
      Two
      Three
      Four
      $(功能(){
        功能hideModal(modalwindow){
          $(modalwindow).modal('hide');
        }

      這將打開jQuery DOM檢查并定義一個全新的函數hideModal()內部參數是一個指向Query窗口的jQuery選擇器,用于隱藏這個小的代碼塊,這會在調用相同函數時節省我們的時間。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
      Nine
      Ten
      $(“奧克溫01”).on(點擊,功能(e){
        e.preventDefault();
        hideModal('#modalwin');
      });
      $(“奧克溫02”).on(點擊,功能(e){
        e.preventDefault();
        updateBGColor();
        hideModal('#bgchangemodal');
      });

      兩個入侵檢測系統奧克溫01奧克溫02這些目標都是隱藏在窗體中的“OK”按鈕。當單擊它們時,我們需要引用前面所寫的HIDEMODAL()函數。但是第二窗口還調用另一個名為UpDeBeGLCORE()的函數。這將確定當前所選的無線電輸入并更改體背景。如果你理解這些代碼,那就不重要了,但是它是一個簡潔的小腳本。

      ?
      One
      Two
      Three
      Four
      Five
      Six
      Seven
      Eight
        $('#closewin02''click',function(e){
          e.preventDefault();
          varcurrentbg = rgb2hex($(“身體”).css(背景顏色));
          ReeEndoButsNs(Currut-BG);
          hideModal('#bgchangemodal');
        };
      });

      這是我們jQuery模態函數中最后一個有趣的部分,它將在用戶單擊BG顏色模式窗口中的“取消”之后運行。您將發現我們正在使用的所有其他函數,再加上一組用于重置輸入值的命令。如果用戶打開我們的模態窗口并在不保存的情況下更改輸入值,則取消,我們只需根據當前的體BG顏色重置當前選定的值。一旦獲得函數的讀數,它就簡單明了了。但是請檢查我的示例代碼作為參考指南。

      泉州設計公司


      最后的想法

      Bootstrap是一個巨大的庫,它包含了不同的小部件和設計特性。泉州設計公司可以花上幾個星期的時間來處理所有的Bootstrap?;綜SS重置有助于在嚴格的時間框架上進行JojSt著手項目。

      理想情況下,你應該能夠復制很多相同的代碼,在Bootstrap中獲取你自己的模態窗口。但是一定要抓取我的源代碼的副本,當你遇到麻煩時,你可以和你自己的源代碼進行比較。實際的引導文檔是很好的設計和易于閱讀的。如果你有額外的問題或者建議免費與我們分享在后討論區。


      网赚团队