單選按鈕在點擊上顯示模式彈出框

我正在開發一個小項目來熟悉ASP.NET。我有這個模型單選按鈕在點擊上顯示模式彈出框

public partial class COUNTRIES 
{ 
public int COUNTRY_ID { get; set; } 
public string COUNTRY_NAME { get; set; } 
public int COUNTRY_AREA { get; set; } 
}

查看

<div class="col-lg-12"> 
    <div class="form-group"> 
     @Html.LabelFor(model => model.COUNTRY_NAME, new { @class = "col-lg-2 control-label" }) 
     <div class="col-lg-9"> 
      @Html.TextBoxFor(model => model.COUNTRY_NAME, new { @class = "form-control" }) 
     </div> 
    </div> 
</div> 

<div class="col-lg-12"> 
    <div class="form-group"> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { id = "", value = "" }) North East 
     </div> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { id = "", value = "" }) North West 
     </div> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { id = "", value = "" }) South West 
     </div> 
     <div class="radio"> 
      @Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { id = "", value = "" }) South East 
     </div> 
    </div> 
</div>

米=> m.COUNTRY_AREA應該產生4個單選按鈕，以及4個單選按鈕被綁定到它。

我想實現的是，當我點擊：

單選1，它應該顯示有消息彈出模式窗體「你們是從東北
單選按鈕2，它應該顯示一個彈出式模式形式，帶有消息「你來自西北。
RadioButton 3，它應該顯示一個帶彈出窗口的模態表單，並顯示消息「你來自東南部。
RadioButton 1，它應該顯示一個帶彈出窗口的模態窗體。

我如何去了解它

來源

2017-05-24 Jibike

您可以輕鬆地完成這個使用JavaScript ...可以你添加到你的問題，一個單選按鈕呈現的HTML？ – Hackerman

這將工作，並且它分解，這樣只有一個JavaScript函數：

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index706</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(".DoPopup").click(function (event) { 
       alert("You are from the " + event.target.id); 
      }) 
     }) 
    </script> 
</head> 
<body> 
    <div class="col-lg-12"> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.COUNTRY_NAME, new { @class = "col-lg-2 control-label" }) 
      <div class="col-lg-9"> 
       @Html.TextBoxFor(model => model.COUNTRY_NAME, new { @class = "form-control" }) 
      </div> 
     </div> 
    </div> 

    <div class="col-lg-12"> 
     <div class="form-group"> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { @class = "DoPopup", id = "North East", value = "" }) North East 
      </div> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { @class = "DoPopup", id = "North West", value = "" }) North West 
      </div> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { @class = "DoPopup", id = "South West", value = "" }) South West 
      </div> 
      <div class="radio"> 
       @Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { @class = "DoPopup", id = "South East", value = "" }) South East 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2017-05-24 17:29:17 kblau

https://jsfiddle.net/kblau237/3m27una2/ – kblau

單選按鈕在點擊上顯示模式彈出框

回答

相關問題