Question

模态定义为：

<div class="moremodal" style="display:none;">
      <div class="modal-dialog modal-lg" style="width: 500px; border: outset; position: fixed; top: 25%; left: 35%;">
        <div class="modal-content" style="top:0px;"></div>
      </div>

每当有人在模态外点击时，我都会禁用点击次数，以便在继续操作之前强制该人员从模态中选择任何选项。（由于某种原因，这不能正常工作。）

$("*:not('.moremodal')").on("click",function(){
     return false;
})

但是我希望在模态关闭后重新启用页面上的点击。我怎么做？我应该在哪里调用该函数或编写该代码？

编辑：我只有一种模态。

Answer 1

使用bootstrap模式并添加此代码，您可以完全实现目标。

希望这会对你有所帮助。

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Title</h3>
            </div>
            <div class="modal-body">
                   **Your HTML goes here**
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Open</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>

Answer 2

使用CSS属性＆＃34; pointer-event：none;＆＃34;关于模态叠加。

Answer 3

这里有两个bootstrap模式。

1）单击模态外部时关闭。 2）单击模态外部时不关闭。

希望它会对你有所帮助。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Default Modal</button>
    
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    
      </div>
    </div>
    
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1" data-backdrop="static" data-keyboard="false" >Disabled outside click modal</button>
    
    <!-- Modal -->
    <div id="myModal1" class="modal fade" role="dialog">
      <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    
      </div>
    </div>

Answer 4

首先将选择器更改为类似的内容（为模型分配id以便于选择）：

$('body').click(function(evt){    

   //all elements except the modal and elements in the modal
   if(evt.target.id == "modal_id" || $(evt.target).closest("#modal_id").length > 0) {

       //if the modal is visible do nothing
       if($("#modal_id").is(":visible")) {
           return false;
       }
   }         
});

修改

如果您正在处理多个模态并需要使用类选择器：

$('body').click(function(evt){ //all elements except the modal and elements in the modal if($(evt.target).hasClass("moremodal") || $(evt.target).closest(".moremodal").length > 0) { //if there is a visible model do nothing if($(".moremodal").is(":visible")) { return false; } } });

Answer 5

只需使用此

即可

private void addOption() {

    counter=counter+1;

    List<AttributeValue> optionListInput = new ArrayList<>();    

    AttributeValue inputAtt;
    LinearLayout addOptionLaout=new LinearLayout(this);

    for (int ii=0;ii<addOptionListItem.size();ii++){
        inputAtt=addOptionListItem.get(ii);
        TextView labelText = new TextView(this);

        if (inputAtt.getInputType().equals("text") || inputAtt.getInputType().equals("textarea")) {
            EditText editText = new EditText(this);
            int id_for = View.generateViewId();
            editText.setTag(inputAtt.getAttributeCode());
            editText.setId(id_for);
            inputAtt.setViewId(id_for);                
            editText.setBackgroundResource(R.drawable.plain_box_white_round);
            editText.setLayoutParams(params);
            editText.setPadding(padding10, padding10, padding10, padding10);
            editText.setInputType(InputType.TYPE_CLASS_TEXT);
            editText.setGravity(Gravity.CENTER_VERTICAL);
            addOptionLaout.addView(editText);
        }  
        System.out.println("view Id: "+inputAtt.getViewId());
        optionListInput.add(inputAtt);
    }
    String mapCounter=counter+"";
    addOptionListMap.put(mapCounter,optionListInput);
}

Answer 6

string TJOBCODE1 = ddlJobCode.SelectedItem.Value;
string abc = ddlJobCode.SelectedItem.ToString();
string TJob_Name = abc.Substring(0, abc.IndexOf('['));
string TRo_Name = abc.Substring(abc.LastIndexOf('[') + 1);

TRo_Name = TRo_Name.Replace("]", "");
string TJOBCODE = TJOBCODE1;
SqlCommand fsql = new SqlCommand("SELECT COUNT(*) AS REC FROM  [MTS_TV_RO_TC_FINAL] where JOB_CODE='" + TJOBCODE + "' AND AGENCY_CODE in( select agency_code FROM " + tmptvrlbktbl + ")", Global.con1);
SqlDataAdapter Fda1 = new SqlDataAdapter(fsql);
DataTable Fdt1 = new DataTable();
Fda1.Fill(Fdt1);
int DD = Convert.ToInt32(Fdt1.Rows[0].ItemArray.GetValue(0).ToString());

if (DD == 0)
{
    string INSQURY = " insert into  [MTS_TV_RO_TC_FINAL] ([DATE],[CAPTION_NAME],[IST],[DURATION],[AMOUNT],[CRID],[JOB_CODE],[AGENCY_CODE],[STATUS],[TBAND_IN],[TBAND_OUT],[DATE_FROM],[DATE_TO],[CREATE_DATE],[USER_NAME],[REMARKS],[Ro_Name],[Job_Name])   SELECT [DATE],[CAPTION],[IST],[DURATION],[AMOUNT],[CRID],'" + TJOBCODE + "',[Agency_code],[STAT],[TBAND_IN],[TBAND_OUT],'" + COMP_FROM + "','" + COMP_TO + "',GETDATE() AS DT,'" + Global.uname + "' ,[REMARKS],'" + TRo_Name + "','" + TJob_Name + "' FROM " + tmptvrlbktbl + " ORDER BY DATE";

    SqlCommand cmd1 = new SqlCommand(INSQURY, Global.con1);
    cmd1.ExecuteNonQuery();
    Alert.show1("Data Saved Successfully", this);
}
else
{
    Alert.show1("Data Already Saved", this);
    return;
}

我认为这个逻辑代码向您展示了它是如何工作的。我没有测试过，所以我认为css部分不是100％正确。

如何在打开时禁用模态外的点击次数＆amp;当模态关闭时重新启用点击？

6 个答案: