2017-12-27 982 views
3

我目前使用Twitter的引導和最近我在和關閉模式時,背景不關閉的問題,除去背景。如何僅從模式

解決了:

$('.modal-backdrop').hide(); 

這種解決方案的問題是,它會從整個頁面的背景。當頁面加載一些功能時,我仍然需要它,以便用戶在此過程中不檢查或取消選中字段。

下面的模態代碼:

 btnEdit_Click(object sender, EventArgs e) 
    { 
     ... 
     ... 
     ... 
     ... 
     ... 
     ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "modal", "closeModal();", true); 
     } 

和JavaScript的CloseModal():

 function closeModal() { 
     $('.modal-backdrop').hide(); 
     $('body').removeClass('modal-open'); 
     $('#myModal').modal('hide'); 
     $('#<%=hfImg.ClientID%>').val(""); 
    } 

有人可以幫助保存按鈕後面

<div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog "> 
      <!-- Modal content--> 

      <div class="modal-content"> 
       <div class="modal-header"> 
        <asp:HiddenField ID="hfImg" runat="server" /> 
       </div> 
       <div class="modal-body" style="overflow: auto; align-content: center;"> 
        <div class="col-sm-12"> 

         <div id="views"></div> 

        </div> 
       </div> 
       <div class="modal-footer"> 
        <div class="row"> 
         <div class="col-sm-12"> 
          <div class="col-sm-1 pull-left"> 
           <button type="button" class="btn btn-primary" data-dismiss="modal";">Cancelar</button> 
          </div> 
          <div class="col-sm-1 col-sm-offset-8"> 
           <button id="cropbutton2" class="btn btn-primary pull-right" type="button" onclick="applyCrop();">Cut</button> 
          </div> 
          <div class="col-sm-1 col-sm-offset-1"> 
           <asp:Button runat="server" CssClass="btn btn-primary pull-right" ID="save" Text="Edit" OnClick="btnEdit_Click" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

C#我,我對這個框架沒有太多經驗,甚至不知道這是否以正確的方式完成。

PS:此頁面是一個ASCX

編輯: 這個項目,我的工作是舊的,我並沒有在開發它的工作的過程。

但現在我只是付出一點點支持和maintanance。 原來這裏有一個架構問題。最初的開發者試圖做一個工作週期,該頁面總是在一個客戶端控制結構中進行,使得更新面板中的所有控件成爲可能。

由於涉及的技術(阿賈克斯和東西),他們不希望它被做了充分的回傳,每次用戶客戶端檢查或uncheked東西或在另一個選項卡中打開一個子菜單。所以他們都看起來像網頁仍然只是在更新面板上進行小的更新。

的背景是在主數據中定義用於此目的。

只發生在我的引導失去參照實物,因爲頁面得到一個回傳,只要你改變任何東西(包括關閉模態)的它之前引用。因此,當我在模式背景上執行.hide或.remove時,bootstrap實際上是針對它可以找到的唯一參考,因此它是在主頁面上定義的參考。

因此,因爲它會花費更多的時間和工作量,所以我們決定在沒有背景的情況下離開模式,在模式標記上使用data-backdrop:false。

感謝大家的幫助。

+0

'$( '模式 - 背景'。)隱藏();'只是增加了一個'display:none'風格的背景。它可以通過調用'$('。modal-backdrop')。show();'返回。這對你有幫助嗎? –

+0

不幸的不是。已經嘗試點擊一個.show(),但是。隱藏總是隱藏整個頁面的背景 –

回答

4

簡單,把data-backdrop="false"上觸發模型或

$("#myBtn2").click(function(){ 
    $("#myModal").modal({backdrop: false}); 
}); 

here按鈕是充分借鑑

+0

data-backdrop =''false「不適合它禁用模態的背景我打開模式時需要它,但問題是如何刪除當模式關閉只爲模式,而不是整個頁面的背景? 此外,我相信這段代碼有一個錯誤的語法,我的導航給我錯誤在屏幕上使用它 –

+0

檢查引導模態文檔頁,我給上面,並給出一些代碼示例 –

+0

當彈出窗口打開時,你不想背景嗎? –

相關問題