關閉按鈕上的jQuery對話框單擊

我有一個jQuery對話框，我用它作爲窗體，當我點擊按鈕時，它執行需要的但不關閉的按鈕。我將如何去關閉點擊按鈕。關閉按鈕上的jQuery對話框單擊

我當前的代碼如下所示：

Heat Name<input type="text" name="heat_name" value="@Html.ValueFor(x => x.heatname)" class="search-query" placeholder="Search" style ="width:100px"/> 
     <button class="btn btn-success" id="Change_Heat_Name" value="Change_Heat_Name" name="action:Change_Heat_Name" type="button"> Change Heat Name</button>

對話框內形式：在打開的對話框

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 
    $('#HeatNameDiv').dialog({ 
     autoOpen: false 
    }); 
}); 
$(document).ready(function() { 
    $('#Change_Heat_Name').click(function (e) { 
     e.preventDefault(); 
     $('#HeatNameDiv').dialog('open'); 
    }); 
}); 
</script>

按鈕

<div id="HeatNameDiv" title="Change Heat Name"> 
@using (Ajax.BeginForm("ChangeHeatName", "Home", FormMethod.Post, new AjaxOptions(){UpdateTargetId = "chemDiv", InsertionMode = InsertionMode.Replace, OnSuccess = "$(document).ready(function() { $('#ChangeHeatName').click(function() { $('#HeatNameDiv').dialog('close');});});" })) 
{ 
    <section> 
     Heat Name:<input type="text" name="heatName" value="@Html.ValueFor(x => x.heatname)" style ="width:100px"/> 
     Change to:<input type="text" name="updatedHeat" value="" style="width: 100px" /> 
     <input type="submit" name="ChangeHeatName" value="Change" /> 
    </section> 
}

來源

2013-04-14 Danger_Fox

多個'.ready'不練琴 –

的close允許你這樣做到底是什麼顧名思義：關閉對話框：

$('#HeatNameDiv').dialog('close');

而且你似乎在呼籲的一些#ChangeHeatName click事件中此功能。請確保您已經取消默認的動作，如果這是錨或提交按鈕，以避免瀏覽器的頁面重定向遠：

$('#ChangeHeatName').click(function() { 
    $('#HeatNameDiv').dialog('close'); 
    return false; 
});

來源

2013-04-14 20:19:12

OP已經具有該行他的代碼 –

是的，這條線應該很好。作爲jQuery UI對話框的文檔，如果你想關閉對話框，你應該使用'.dialog（'close'）'方法。不要猶豫，以防萬一你有一些疑問，請參考文檔：http：//api.jqueryui.com/dialog/#method-close –

我想問題是，ChangeHeatName不綁定到DOM時，點擊事件。現場可能會解決這個問題。 – alexn

把所有的代碼在一個$(document).ready()，並嘗試這個

$(document).ready(function() { 
    $('#HeatNameDiv').dialog({ 
     autoOpen: false 
    }); 

    $('#Change_Heat_Name').click(function (e) { 
     e.preventDefault(); 

     // This will open the dialog 
     $('#HeatNameDiv').dialog('open'); 
    }); 

    $('#ChangeHeatName').click(function (e) { 
     e.preventDefault(); 

     // This will close the dialog 
     $('#HeatNameDiv').dialog('close'); 
    }); 
});

DEMO HERE

由於在對話框內的按鈕，使用下面的代碼：

$('#ChangeHeatName').click(function (e) { 
    e.preventDefault(); 
    $('.ui-icon-closethick').click(); 
});

DEMO HERE

來源

2013-04-14 20:22:05

感謝您的幫助。唯一的問題是我想關閉它的按鈕在對話框中。 –

該演示版本是否適合您？ –

@Danger_Fox我已經更新了代碼。嘗試一次！ –

下面是在對話框按鈕的代碼，然後關閉上單擊對話框

jQuery(document).ready(function ($) { 
       $("#dialog").dialog({ 
        autoOpen: false, 
        show: { 
         effect: "blind", 
         duration: 1000 
        }, 

       hide: { 
        effect: "explode", 
        duration: 1000 
       } 
      }); 

      $("#opener").click(function() { 
       $("#dialog").dialog("open"); 
      }); 
      $("#Closer").click(function() { 
       $("#dialog").dialog("close"); 
      }); 
     }); 

<div id="dialog" title="Basic dialog"> 
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
    <button id="Closer">Close Dialog</button> 
</div>

打開對話框

來源

2015-12-19 00:10:38

關閉按鈕上的jQuery對話框單擊

回答

相關問題