Question

我正在尝试使用模式数据目标功能在按钮单击时聚焦输入字段。它是焦点，但是创建了一个名为<div class="modal-backdrop in">的div，并且模态没有正确关闭。因此用户无法点击网站上的任何位置。似乎有一个我无法找到记录的问题，希望这里有人可以对此有所了解。当用户点击模态上的Upload Now按钮时，我想关注该输入字段。这是demo

.height500 {
  height:500px;
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="height500"><input type="text" name="" class="" id="noimgtakediv" /></div>
<a data-toggle="modal" data-target="#portfoliomsgmodal" class="btn btn-danger btn-sm"> Click to Open Modal</a>

<!-- Modal -->
<div id="portfoliomsgmodal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title">TIP</h3> </div>
            <div class="modal-body">
                    <label>There are twice as much chances of you getting contacted by your customers if you upload something in your portfolio. Upload photos or video or audio links to your profile.</label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-warning" data-target="#noimgtakediv" data-toggle="modal" data-dismiss="modal">Upload Now</button> 
                <input type="submit" id="submitlater" class="btn btn-primary nomargin" value="Remind me later">
            </div>
        </div>
    </div>
</div>

Answer 1

检查一下

.height500 {
  height:500px;
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="height500"><input type="text" name="" class="" id="noimgtakedivnew" /></div>
<a data-toggle="modal" data-target="#portfoliomsgmodal" class="btn btn-danger btn-sm"> Click to Open Modal</a>

<!-- Modal -->
<div id="portfoliomsgmodal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title">TIP</h3> </div>
            <div class="modal-body">
                    <label>There are twice as much chances of you getting contacted by your customers if you upload something in your portfolio. Upload photos or video or audio links to your profile.</label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-warning" data-toggle="modal" data-dismiss="modal" onclick="focusontest()">Upload Now</button> 
                <input type="submit" id="submitlater" class="btn btn-primary nomargin" value="Remind me later">
            </div>
        </div>
    </div>
</div>

<script>
function focusontest()
{
setTimeout(function(){   $("#noimgtakedivnew").focus() }, 500);
}
</script>

Answer 2

使用Jquery focus()

＆＃13;

$('#portfoliomsgmodal').on('hidden.bs.modal', function (e) {
  $('#noimgtakediv').focus();
})

＆＃13;

.height500 {
  height:500px;
  background-color:yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="height500"><input type="text" name="" class="" id="noimgtakediv" /></div>
<a data-toggle="modal" data-target="#portfoliomsgmodal" class="btn btn-danger btn-sm"> Click to Open Modal</a>

<!-- Modal -->
<div id="portfoliomsgmodal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title">TIP</h3> </div>
            <div class="modal-body">
                    <label>There are twice as much chances of you getting contacted by your customers if you upload something in your portfolio. Upload photos or video or audio links to your profile.</label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-warning"  data-toggle="modal" data-dismiss="modal">Upload Now</button> 
                <input type="submit" id="submitlater" class="btn btn-primary nomargin" value="Remind me later">
            </div>
        </div>
    </div>
</div>

＆＃13;

使用data-dismiss =“modal”data-target =“＃id”的模态不会到达目的地

2 个答案: