How to deselect a close icon button in Html

Question

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

1)click on open modal 2)after clicking dialog box will be appear. 3)select this text "Some text in the Modal.." in the dialog box and go left. 4)dialog box is closing automatically 5)it wont happen 6)it shouldn't close if i select the text 7)dialog will not disappear. stick to the same place afteer selecting 8)thanks in advance

Does this answer your question? [how to write onblur and onfocus event in javascript?](https://stackoverflow.com/questions/5014710/how-to-write-onblur-and-onfocus-event-in-javascript) — l3l_aze, Aug 07 '20 at 04:08
no i dont want to select on close icon. please see the image — abhi, Aug 07 '20 at 04:16

95faf8e76605e973 · Answer 1 · 2020-08-07T04:42:02.813

0

You can have the x icon as a pseudo element. So it can't be selected as text

.x-icon:after {
    content: "\00d7"; /* equivalent of html &times; */
}

<span class="x-icon"></span>

Regarding your issue on the modal closing when you "select text and go left", just switch event from click to onmousedown so that it won't trigger when letting go of the mouse trigger after text selection

window.onmousedown = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

edited Aug 07 '20 at 04:42

answered Aug 07 '20 at 04:21

95faf8e76605e973

13,643
3
24
51

@abhi just do onmousedown event instead of click – 95faf8e76605e973 Aug 07 '20 at 04:42
not about onmousedown event. close icon is appling on entire
×
Some text in the Modal..

. it should be only work on icon not on form – abhi Aug 07 '20 at 04:50
@abhi because it is being treated as a flex item - it's gonna take up the entire space. you are going to want to wrap it inside another container. example: `
×
`. adjust alignment afterwards as needed – 95faf8e76605e973 Aug 07 '20 at 04:59
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal you can chech here – abhi Aug 07 '20 at 05:02

kelvin · Accepted Answer · 2020-08-07T06:06:45.740

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

 <div class="modal-content">
   <span class="close unselectable">&times;</span>
   <p>Some text in the Modal..</p>
</div>

use this Css to make it unselectable

check out https://stackoverflow.com/a/2310809/3995126 for more details

EDIT 1:

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
 if(window.getSelection().toString() != 'Some text in the Modal..'){
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
}

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>



</body>
</html>

Select Whole Text and click outside of modal

How to deselect a close icon button in Html

2 Answers2