jQuery关闭时无法清除弹出窗口中的文本

时间：2018-12-12 13:10:07

标签： javascript jquery html

我有一个弹出菜单，并且在弹出窗口中有一个iframe代码作为文本。我有一个启用iframe代码文本的按钮。然后我需要禁用或显示：关闭弹出窗口时，无iframe文本。因此，下一次我打开弹出窗口时，再次必须单击按钮以启用文本。我进行了显示：没有带弹出式关闭按钮的iframe文本，但是我无法通过点击弹出式窗口模式来做到这一点。当我将Display：none应用于模式类或淡入淡出类时，我什至无法启用文本。我如何在弹出窗口关闭时禁用文本？

代码如下：

	$(".embed-btn").on("click", function() {
		$(".embed-iframe").css("display", "block");
	});

	$(".close").on("click", function() {
		$(".embed-iframe").css("display", "none");
	});
.embed-iframe{
	display: none;
	padding: 10px;
	margin-top: 20px;
	border: 1px solid #ececec;
	background-color: #fafafa;
	font-size: 14px;
	font-weight: 400;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<button class="btn open" data-toggle="modal" data-target="#modal1">OPEN</button>

<div class="modal fade main-div-1" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-div" role="document">
		<div class="col-md-3 img-div">
			<img src="">
		</div>
		<div class="col-md-9 modal-content content-div">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel"></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
        <button class="btn embed-btn">Enable Code</button>
				<div class="embed-iframe">
					<span class="embed-iframe-text">
						&lt;iframe width="" height="" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
					</span>
				</div>
			</div>
		</div>
	</div>
</div>

3 个答案:

答案 0 :(得分：1)

  

如何在弹出窗口关闭时禁用文本？

您可以使用Bootstrap的内置模式事件来处理这种情况。

$('#modal1').on('hide.bs.modal', function (e) {
  $(".embed-iframe").css("display", "none");
})

有了这个，您也可以删除下面的代码行，因为.close按钮也将触发hide.bs.modal事件。

$(".close").on("click", function() {
  $(".embed-iframe").css("display", "none");
});

答案 1 :(得分：1)

您需要添加模式关闭事件侦听器，一切顺利。

签出documentation

赞

$('.modal').on('hidden.bs.modal', function() {
 $(".embed-iframe").css("display", "none");
})


$(".embed-btn").on("click", function() {
  $(".embed-iframe").css("display", "block");
});

$('.modal').on('hidden.bs.modal', function() {
 $(".embed-iframe").css("display", "none");
})
.embed-iframe {
  display: none;
  padding: 10px;
  margin-top: 20px;
  border: 1px solid #ececec;
  background-color: #fafafa;
  font-size: 14px;
  font-weight: 400;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<button class="btn open" data-toggle="modal" data-target="#modal1">OPEN</button>

<div class="modal fade main-div-1" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-div" role="document">
    <div class="col-md-3 img-div">
      <img src="">
    </div>
    <div class="col-md-9 modal-content content-div">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
      </div>
      <div class="modal-body">
        <button class="btn embed-btn">Enable Code</button>
        <div class="embed-iframe">
          <span class="embed-iframe-text">
						&lt;iframe width="" height="" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
					</span>
        </div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：1)

您可以检查以下工作链接， http://jsfiddle.net/brahmpragya/mwcsbyv3/12/

为此，我解决了这个问题。只是模式关闭时的小问题隐藏了iframe代码。

代码如下：

import re

keywords=[
    "i can help you with that", 
    "i can surely help you with that", 
    "i can check and help you with that", 
    "i will be more than happy to help you", 
    "let me assist you on this", "to assist you better",
]

file_contents = '' # here is where you get contents from excel file

for line in file_contents:
    for keyword in keywords:
        temp = re.search(r''+ keyword +'', line, flags=re.IGNORECASE)
        if temp:
            print('[out]:',  line)

	$(".embed-btn").on("click", function() {
		$(".embed-iframe").css("display", "block");
	});

	$(".close").on("click", function() {
		$(".embed-iframe").css("display", "none");
	});
.embed-iframe{
	display: none;
	padding: 10px;
	margin-top: 20px;
	border: 1px solid #ececec;
	background-color: #fafafa;
	font-size: 14px;
	font-weight: 400;
}

相关问题
最新问题