Develop Reference

JavaScript : Piece of code that breaks my modals

I have a piece of code that will create a contextual menu on right-click on one input in my page. The code is supposed to add "{Keyword: }" to the input. The problem is when I add the JS below all the modals that I use stop working (not displaying). The modals are activated by a button click.
Contexctual menu HTML:
<div id='cntnr'>
<ul id='items'>
<li>{Keyword:fallback}</li>
<li>{KeyWord:fallback}</li>
</ul>
</div>
Contexctual menu JS:
$("#headline11").on("contextmenu",function(e){
e.preventDefault();
$("#cntnr").css({"left": e.pageX-3, "top": e.pageY-3});
$("#cntnr").fadeIn(200, startFocusOut);
});
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}
$("#items > li").click(function(){
$("#headline11").val($(this).text().replace("fallback", " "));
var input1 = document.getElementById("headline11");
setInputSelection(input1, 9, 10);
});
Button:
<button onclick="load();setTimeout(myFunction, 10)" class="myBtn1" data-toggle="modal" data-target="#build">1 - Create campaign</button>
The modal:
<div class="container">
<!-- Modal Preview-->
<div class="modal fade" id="build" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Your Campaign Preview1</h4>
</div>
<div class="modal-body">
<div id="hoursSaved"></div>
Some text here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
When I use {Keyword: Whatever here} in my input and submit, the modals stop working, but when I remove the JS above everything works, except the contextual menu of course.
It took me hours to debug my code and find what part of it is causing the problem, but I'm unable to understand why. Your help will be much appreciated.
Thank you,
EDIT: Here is a JsFiddle as requested in the comments. You'll have to run the code between each test to see the difference.
https://jsfiddle.net/yagami889/xpvt214o/470697/
You'll have to use the contextual menu to add the {Keyword:} you can enter whatever you want after ":", it won't work if you past it.

I found the answer. I had to use:
function startFocusOut(){
$("#cntnr").on("click",function(){
$("#cntnr").hide();
$("#cntnr").off("click");
});
}
Instead of:
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}

Trouble getting index of class with jQuery

I have a few hidden modals on a page that I want to control with a single block of javascript code.
I'm trying to test to see if I'm getting the correct close button with class close, but my console.log is currently printing -1.
HTML
<span class="open">Button A</span>
<span class="open">Button B</span>
<!--modal-->
<div class="modal">
<!--modal content-->
<div class="modal-content">
<!--close button-->
<span class="close">×</span>
<!--content A-->
</div>
</div>
<!--modal-->
<div class="modal">
<!--modal content-->
<div class="modal-content">
<!--close button-->
<span class="close">×</span>
<!--content B-->
</div>
</div>
JS
$(document).ready( function() {
//when a class '.open' is clicked
$('.open').click(function(){
//store the index of the clicked span in a variable
var indexer = $('.open').index(this);
//test output - working
console.log("open. " + indexer);
//store all classes '.close' in a variable
var close = $('.close');
//store '.close' with same index as clicked button
var closeindex = $('.close').index(indexer);
console.log(closeindex);
});
});
I'm trying to walk through this click function and assign each class with the correct index to a variable, and I'm using console.log to print the indexes to the console.
With console.log(closeindex), I'm trying to get the index of the close button that has a matching index of span .open that was clicked, but currently it's returning -1.
I want to eventually do something like:
close.click = function() {
$('.modal').index(indexer).style.display = "none";
}

var closeindex = $('.close').eq(indexer);
Ok, so if you have a relationship between open and close such that the 3rd open related to the 3rd close, then you can get the related close by using the eq() method as above.
eq() will get you the element at that index, keeping it as a jQuery object.

If you're trying to open and close modal dialogs based on the buttons, I'd like to suggest an alternative method to indexes. With indexes, any refactoring/reordering of your elements is liable to throwing your code off entirely.
Consider using data attributes to keep track of what modal each open button is referring to. That way, no matter where your button/modals are, they are permanently linked.
If you give each modal an ID, and then add that ID to a data attribute on your open button...
<span class="open" data-modal="modal1">Open Modal 1</span>
<div class="modal" id="modal1"></div>
...then you can easily relate open buttons to their proper modals.
The close buttons can simply say "Close my parent modal" when clicked. We can do this using .closest( selector ) which traverses upwards in the DOM to find the first matching ancestor.
Working Example:
$(".open").on("click", function() {
$(".modal").hide(); //Hide all open modals
var modalId = $(this).data("modal"); //Get the Modal ID from the data-modal attribute
var $modal = $("#" + modalId); //Select the modal with that ID
$modal.show(); //Show it
});
$(".close").on("click", function() {
$(this).closest(".modal").hide(); //Close the closest modal (ancestry-wise)
});
div.modal {
display: none;
padding: 50px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="open" data-modal="modal1">Button A</span>
<span class="open" data-modal="modal2">Button B</span>
<!--modal-->
<div class="modal" id="modal1">
<!--modal content-->
<div class="modal-content">
I'm modal 1!
<!--close button-->
<span class="close">×</span>
<!--content A-->
</div>
</div>
<!--modal-->
<div class="modal" id="modal2">
<!--modal content-->
<div class="modal-content">
I'm modal 2!
<!--close button-->
<span class="close">×</span>
<!--content B-->
</div>
</div>
<!-- -->

Not able to get Bootstrap Modal to center with some JavaScript

I'm working on two different things with a Bootstrap Modal. The first is to dyanamically load them from an MVC partial view. That part seems to be working. Now I'm trying to get the Modal to center on the page.
I'm working off of this example but can't seem to get it to work. https://www.abeautifulsite.net/vertically-centering-bootstrap-modals
I changed the name of dialog id in the JavaScript to ".modal-container" so that it should find my modal. Other than that I don't see anything else I would need to change. I've looked at the F12 Dev Tools and I don't see any errors.
Index.cshtml
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div>
<div class="container">
#Html.ActionLink("Test Modal ", "TestModal", "Test", null, new { #class = "modal-link btn btn-warning" })
</div>
</div>
<div id="modal-container" class="modal fade" role="dialog">
<div class="modal-content">
</div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script type="text/javascript">
//**** Bootstrap Modal - used with Partial Views ***********************
$(function () {
// Attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
/**
* Vertically center Bootstrap 3 modals so they aren't always stuck at the top
*/
$(function () {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-container');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function () {
$('.modal:visible').each(reposition);
});
});
</script>
</body>
</html>
Controller
public class TestController : Controller
{
// GET: Test
public ActionResult Index()
{
return View();
}
public ActionResult TestModal()
{
return PartialView("_TestModal");
}
}
_TestModal.cshtml
<div class="modal-body">
<h4>
Are you sure you want to delete this cost center from all clocks in the group?
</h4>
#using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post))
{
<div class="row">
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" id="approve-btn" class="btn btn-danger">Save</button>
</div>
</div>
}
</div>
<script type="text/javascript">
$(function () {
$('#approve-btn').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
EDIT: I should have mentioned in the initial post that the Modal just displays at the top of the page and goes to 100% width.

Well, I noticed (what I believe to be) a fairly simple mistake in your code just by looking at it:
dialog = modal.find('.modal-container');
finds any element with a CLASS of 'modal-container'.
In your code snippet, however, you have the ID of the div set to 'modal-container', not the CLASS.
So that line of code above is not locating the div you want. In fact, I don't think it is finding any elements (since there are none with a class of 'modal-container').
So maybe change it to something like:
<div class="modal fade modal-container" role="dialog">
<div class="modal-content">
</div>
</div>
OR leave the HTML the same and change the modal.find() to say something like:
dialog = modal.find('#modal-container');
Let me know if that helps.
Edit:
Your modal is full width because your Bootstrap modal structure is off. You are missing a div.
This is what you have:
<div id="modal-container" class="modal fade" role="dialog">
<div class="modal-content">
</div>
</div>
here is what you need (and should fix your problems):
<div id="modal-container" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
adding a div with the class of 'modal-dialog' should help.
Oh, and change the modal.find() to:
dialog = modal.find('.modal-dialog');

Clicking sub menu pop up a modal in wordpress plugin

I am working on a Wordpress plugin where I want to open a pop-up modal when I click on one of my plugin sub-menus. I can trigger the modal using a link or a button, but I want to load the modal at the time I click on the submenu.
Code for menu and submenu:
<div class="wp-menu-name">Smart Form Builder</div>
<ul class="wp-submenu wp-submenu-wrap">
<li class="wp-submenu-head">Smart Form Builder</li>
<li class="wp-first-item">
<a class="wp-first-item" href="admin.php?page=smart-form-builder">Create New Form</a>
</li>
<li>
Form List
</li>
<li>
Support
</li>
</ul>
</div>
Code for my model:
<div class="modal fade" id="modal_choose_ur_form" tabindex="-1" role="dialog" aria-labelledby="modal_choose_ur_formLabel">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><h3>Choose Your Form</h3></h4>
</div>
<div class="modal-body">
Click
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now i want to pop up the modal when i click on Create New Form submenu. So what i have code in my sfb_create_form_page function?
I tried using various way of using javascript like
<script type="text/javascript">
$(document).ready(function () {
$('#modal_choose_ur_form').modal('show');
});
</script>
this is working for a simple HTML page quite well but not for my plugin. What can do can anyone help?

Here you go. Link
You need to fire click event on ul li . And open popup when click event is generated.
$(document).ready(function () {
$(".ulLiOuter ul li").click(function(e){
e.preventDefault();
$('#modal_choose_ur_form').modal('show');
});
});

I am using like this.
Go to wp-admin/nav-menus.php page and open the "Show Settings" from top, Check the (XFN) checkbox then write to xfn input some rel value "like a modal" than add your .js file this code
$('a[rel="modal"]').click(function () {
$("#modal-id").modal();
});

Passing Data to Bootstrap Modals

I am trying to create a simple modal using twitter bootstrap. The function of that modal is to take the name of the link clicked on, and use that name as a header. Each of the names are in a Django Database. I followed this link for reference: Passing data to a bootstrap modal
#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open- AddBookDialog " href="#addBookDialog">{{ name }}</a><br />
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
#JavaScript
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
$("modal-body #nameId").val( myNameId );
});
</script>
What the above does is displays a text box with the characters name in the box. What I would like is to have the name as the header, not in a text box. When I remove the textbox, and place a header tag with the same id and name, nothing will show. Is there a way to complete this task.

the header is the first h3 in the modal.
So you need to add a h3 element under ".modal-header" with an id and set the .html() of that element. :)
Look here for reference: http://twitter.github.io/bootstrap/javascript.html#modals
Here's the code:
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 class="hdrtitle">This is the header</h3>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
Using a code like:
$('.modal .hdrtitle').html('This is the header');
and then showing it with:
$('.modal').modal('toggle');
works.

The one-off way
If this is the only time you'll ever need to do a UI-binding behavior in your site/app, do something like this:
$('.header-link').click(function(e) {
$('.modal-header h4').html($(e.target).html())
})
CodePen Demo
This will just take the text (actually the HTML) in the link itself and put that in the header.
Using a library
If you plan to do these sorts of cool tricks in more parts of your app, consider using a UI-binding library like Angular JS or Knockout. This way you can data-bind parts of your UI with events.

I found the answer. Thanks to #PaoloCasciello for a layout.
Instead of an .on function in javascript, it really needed to be .html. So here is what the final code will look like.
<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 id="nameId" />
</div>
<div class="modal-body">
<p>some content</p>
</div>
</div>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
var myNameDescription = $(this).data('description');
$(".modal-header #nameId").html( myNameId );