We Keep Coding

Why does my jQuery open and close my pop up before clicking the body?

I have a pop up that opens up so users can reply to messages. now when a user clicks <a> tag it opens the popup, but it doesn't close if they hit anywhere in the body. I tried fixing this by using jquery but it keeps opening and then closing the pop up again immediately after clicking on the <a> tag.
My <a> tag:
<a class="msg-icon2" onclick="openReplyModal(<?php echo $msg_id ; ?>)">
<i class="fas fa-reply"></i>
</a>
My jquery:
var msg_id;
function openReplyModal(id) {
msg_id = id
$("#reply_modal" + msg_id).fadeIn();
jQuery(document).ready(function($) {
jQuery("body").click(function() {
$("#reply_modal" + msg_id).fadeOut();
});
});
}
How can I adjust my code so that when the user clicks the button for the first time it would open the popup and stay opened unless he clicks anywhere in the body?
here is the code i got from the answer below:
`function openReplyModal(id, event) {
$(".modal").hide(); // close other modal
msg_id = id
$("#reply_modal" + msg_id).fadeIn();
event.preventDefault();
event.stopPropagation();
}
jQuery(document).ready(function($) {
// click on modal doesn't hide itself
$("body").on("click", ".modal", function(e) {
e.stopPropagation();
});
// clicl anywhere else hides all modals
$(window).click(function() {
$(".modal").fadeOut();
});
});`

Give all your modals a common class, such as class="reply_modal". Then you can have a general click handler that fades them all out when you click on the body.
The reason that the modal closes immediately is that the click event bubbles out from the <a> to the body, so it closes the modal. I added event.stopPropagation() to the function so it won't bubble out.
Use $(window).click() to detect clicks anywhere in the window outside the element. See How do I detect a click outside an element?.
var msg_id;
function openReplyModal(id, event) {
$(".reply_modal").hide(); // close other modal
msg_id = id
$("#reply_modal" + msg_id).fadeIn();
event.preventDefault();
event.stopPropagation();
}
jQuery(document).ready(function($) {
// click on modal doesn't hide itself
$("body").on("click", ".reply_modal", function(e) {
e.stopPropagation();
});
// clicl anywhere else hides all modals
$(window).click(function() {
$(".reply_modal").fadeOut();
});
});
.reply_modal {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="msg-icon2" onclick="openReplyModal(1, event)" href="#"> <i class="fas fa-reply">open 1</i></a>
<a class="msg-icon2" onclick="openReplyModal(2, event)" href="#"> <i class="fas fa-reply">open 2</i></a>
<div id="reply_modal1" class="reply_modal">This is modal 1<br>
<input></div>
<div id="reply_modal2" class="reply_modal">This is modal 2<br>
<input></div>

jQuery(document).ready(function ($) {
function openReplyModal(id) {
msg_id = id
$("#reply_modal" + msg_id).addClass('model-open').fadeIn();
}
$('body').click(function (e) {
$('.model-open').removeClass('open').fadeOut();
});
});

Click links to hide/show content

I'm having a table listing some comments. Next to the comment there are two links, the hide and show. So what I want to do is when clicking the right link to change the comment's status with ajax.
// inside a loop for showing all comments
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>
<?= $row->comment; ?>
<script type="text/javascript">
function toggleHistoryNotes(status) {
var link = $('.' + status + '-history-comment-link');
var time = link.attr('data-time');
alert(time);
}
</script>
How can I target which link was clicked and do the ajax call to toggle the comment status?

You can change your JQuery to trigged on click on a tag. Also, you should add e.preventDefault(); as this is gonna be click on the a tag, and this would prevent default action.
$('.pull-right a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
console.log($(this).text() + ' == ' + time);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>

<script type="text/javascript">
$('a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
});
</script>

Running script with onclick event when only inside a particular div element

I'm looking at running this script:
$(document).ready(function() {
$('a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load($(urlyep).attr('href'));
});
});
This loads content from a local HTML file via a menu hyperlink into the #content div. It works great but I want to make it more specific so it only works when the click is made in the #menubar div.

Err… You mean $('#menubar a').click(…) ?

<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load("yourexternalpage.html");
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" >menubar</div>
If you have more than one link on the menu bar, I am assuming you have, each needing to load it's own content/page you could do something like the following.
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this.name);
e.preventDefault();
$("#content").load(urlyep);
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" ><a href="#" name="page1.php" >menubar link1</a>-<a href="#" name="page2.php" >menubar link2</a></div>

How to disable one toggler when another toggler is not toggle back yet?

I have a image with 2 buttons:
<div class="panel">
<div>
<a class="a-button>Toggle A</a>
<a class="b-button>Toggle B</a>
</div>
<p id="statics">Statics numbers</p>
<p id='chart">Chart</p>
</div>
<div class="item-img"><img src="..."></div>
If I want to view #statics, I click a-button to hide item-img. Then, click again to show img and hide #statics.
If I want to view #chart, I click b-button to hide item-img, then, click again to show item-img and hide #chart.
jQuery(document).ready( function($) {
$(".a-button").click(function () {
$("#statics").toggle("slow");
$(".item-img").toggle('slow');
});
$(".b-button").click(function () {
$("#chart").toggle("slow");
$(".item-img").toggle('slow');
});
});
The problem is-- If I hide item-img by either toggler a-button or b-button, Then, click the other toggler(a or b) before click the first toggler to show the item -img again, Both #statics and #chart show up, make a big mess.
How can I disable one toggler when another toggler is not toggle back yet?

jQuery(document).ready( function($) {
$(".a-button").click(function () {
if(!$("#chart").is(':visible')) {
$("#statics").toggle("slow");
$(".item-img").toggle('slow');
}
});
$(".b-button").click(function () {
if(!$("#statics").is(':visible')) {
$("#chart").toggle("slow");
$(".item-img").toggle('slow');
}
});
});
Working Fiddle

jQuery(document).ready( function($) {
var state;
$(".a-button").click(function () {
$("#statics").toggle("slow");
$(".item-img").toggle('slow');
state = $(".b-button").prop('disabled');
$(".b-button").prop('disabled', !state);
});
$(".b-button").click(function () {
$("#chart").toggle("slow");
$(".item-img").toggle('slow');
state = $(".a-button").prop('disabled');
$(".a-button").prop('disabled', !state);
});
});
Edit: Didn't realize you weren't using actual buttons, see working demo with this updated html (not sure if you have the option to change those):
<input type="button" class="a-button" value="Toggle A">
<input type="button" class="b-button" value="Toggle B">

Problems with manipulating divs within simplemodal dialog popup - Further Edit

Ok, I'm having a major headache with simplemodal - I know I'm almost there, but can't get this to quite work right. I have a simplemodal dialog that has several dynamically created divs inside it, such as
<html>
<head>
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='container'>
<h1>Test Page</h1>
<div id='content'>
<div id='confirm-dialog'>
Page Content Goes Here
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Header Text</span></div>
<div class='message'>
<div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div>
<div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div>
<div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div>
</div>
<div class='buttons'>
<div class='yes'>OK</div>
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>
<script type="text/javascript">
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("", function () {
for(var k = 0; k <= 3; k++) {
if(options[k].checked) {
var ele = document.getElementById("optionDiv" + k);
ele.style.display = "none;";
//alert("Stop Here");
}
}
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
containerCss: {
height: 300,
width: 450,
backgroundColor: '#fff',
border: '3px solid #ccc'
},
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
</script>
</body>
</html>
In the click code, I'm trying to make it so when the user clicks on one of the radio buttons, then clicks 'OK', that item is no longer visible in the popup. If I follow that code with an alert("Stop here");(shown in the code above, commented out), then I can see the div disappear from the popup. But once I clear the alert box, (or if I comment it out so it never runs), the next time I activate the dialog, the div that I hid is re-appearing. How can I keep it hidden, so that it remains hidden the next time the dialog is activated, or is that possible? Thanks in advance.
FINAL EDIT: Found the solution for the dialog box reverting to its original state every time it opens. I pasted this in just above the jquery code, and it works like a charm:
<script> $.modal.defaults.persist = true; </script>
Found on this site in another thread, as part of a different question. Thanks for all who helped.

Your code still doesn't look complete to me, but as for your confirm function callback
confirm("", function(){
$('#confirm input[type=radio]').each(function(){
if($(this).is(':checked'))
$(this).parent().empty();
});
});
Like that?