We Keep Coding

Modal refactor over some common elements

These code works fine, but is repeating the same over and over, needs to refact.
The elements presented on page are Title and Description of all Modal. Rest
of functionality is the same. Css is default bootstrap, it can be the same
whithout any important change.
I added another Help button on the side of each primary button, to help
search some information about how to find the documentation on every element
inside the Modals. Is no needed to focus on that at the moment.
Lorem ipsum text, can be placed on the respective container to complete
the description, and title, feel free to do it by your own.
To test the code, link Bootstrap 4.0 js files on the page.
So some guide to refact here, will be apreciated. Thank you very much.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</br>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-2" data-whatever="2. First Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</ul>
</div>
</div>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 1</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Title 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
$('#example-1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})
$('#example-2').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})

I created a single modal in which the information can be replaced according to the button that clicked it. To take care of a longer text for modal body part, I added a that contains the relevant text along with the button in the same li but keeping the same hidden. So on click of the modal lonk all the relevant values can be replaced using jquery like this.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding first modal or...">?<i></i></button>
<div id="1content" style="visibility: hidden;"> <p>Some text Description 1</p></div>
</a></li>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="2. Second Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding second modal or...">?<i></i></button>
<div id="2content" style="visibility: hidden;"> <p>Some text Description 2</p></div>
</a></li>
</ul>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<script>
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var button = $(this); // Button that triggered the modal
var recipient = $(this).attr("data-whatever");
var modal = $("#example-1");
modal.find('.modal-title').text(recipient);
var div = $( "div" );
// if last() is not used, then it brings that information button's ? as well
var bodyText = $(this).siblings(div).last().text();
modal.find('.modal-body p').text(bodyText);
});
</script>

How to open a particular tab inside a modal

I have 2 buttons and each is responsible for opening a modal, however, this modal has 2 tabs for signup and sign in. I want that if a user clicks on signup button then after the modal opens the signup tab should be active and if a user clicks on sign in button then after the modal opens the sign in tab should be active
The code of the button is
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">SIGN UP</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-lg_two">SIGN IN</button>
The code of modal is
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs" >
<li class="nav-item col ">
<a class="nav-link active" href="#signup" data-toggle="tab" >Sign up</a>
</li>
<li class="nav-item col ">
<a class="nav-link" href="#signin" data-toggle="tab" >Sign in</a>
</li>
</ul>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="tab-content">
<div class="tab-pane active" id="signup">
signup box
</div>
<div class="tab-pane" id="signin">
signin box
</div>
</div>
</div>
<div class="col" id="social" >
Content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Can anyone please tell me how to do this

You'll have to do it with Javascript. Here's one way. Working JSFiddle.
First, get rid of the data-toggle="modal" data-target=".bd-example-modal-lg" on both buttons. You'll need to run your tab-targeting Javascript when you open the modal, and you can easily do that if you manually open the modal using the modal show method, rather than via the data attributes.
Next, in their place, add something to each button to identify which tab it targets - for eg a data attribute, with the id of your tabs:
<button type="button" class="btn btn-primary" data-tab="signup">SIGN UP</button>
Last, add some Javascript to do the work:
// Add an event handler to fire when our buttons are clicked
$('button').on('click', function() {
// Find which button was clicked, so we know which tab to target
var tabTarget = $(this).data('tab');
// Manually show the modal, since we are not doing it via data-toggle now
$('.bd-example-modal-lg').modal('show');
// Now show the selected tab
$('.nav-tabs a[href="#' + tabTarget + '"]').tab('show');
});
Note that as the docs describe, you target the tab with the a link which opens it, not the div of the tab itself.

Twitter Bootstrap Modal change Content via Ajax

I know, here are many question with the same topic.
But I cannot find a solution for my prpblem.
So I have a layout and before the body tag closes there is the modal window:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
CONTENT
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
I have a link in my site that toggles the modal window:
<a data-toggle="modal" class="btn btn-info" href="myRemote.php?id=1" data-target="#myModal">Click</a>
My remote php only contains "<php echo $_GET['id'];?>" for testing.
In the future there is content from a database.
So everytime I click on the link to the modal the content will change.
this is not the problem, I know how to do this in php etc.
And I write JS that the modal content should change:
$(document).ready(function() {
// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
})
the problem:
when I click the link the modal window opens. perfect.
But than the modal window dissappear and in the top position of my site there is the "1". But this is not so nice, because I only want that the content "CONTENT" in the modal-body should change to "1."
What I am doing wrong here?
And - another question. If I do this with changing content every time with the $_GET['id'] the 1 never dissappear, but I want changing the content dynamic here, so in this example there should be a "2" in the modal-body class of the modal window if I click on a link like this:
<a data-toggle="modal" class="btn btn-info" href="myRemote.php?id=2" data-target="#myModal">Click</a>
Can somebody help me please?

Make link like below:
<a class="btn btn-info openModal" data-href="myRemote.php?id=1">Click</a>
<a class="btn btn-info openModal" data-href="myRemote.php?id=1">Click 2</a>
On Js:
$(document).ready(function() {
// Fill modal with content from link href
$(".openModal").on("click", function(e) {
var link = $(this).data("href");
$('#myModal').modal("show");
$('#myModal .modal-body').load(link );
});
})
Can you try it ?

Open Modal (bootstrap) from other html-file

I'm building a website using bootstrap. But i'm come to somewhat of an dead-end. i've created a modal from an given example (see below). As you might see, this is a modal taken straight from their website.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Nieuwe Taak toevoegen</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I open this dialog using a button.
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >
But i want to keep my modals in seperate aspx/html-files. How can i open these modals when they are kept inside different html/aspx - files ?
example:
if the button is inside index.Html but the modal is inside newTaskModal.html, how would i open the modal? (If both are inside index.html, then there are no problems)
Note: I don't/can't use HTML5 (company-standards)

if you're using jquery, you could download the page using an ajax call:
$.ajax({
url: 'newTaskModal.html',
dataType: 'text',
success: function(data) {
alert(data);
// todo: add the html to the dom...
}
});
If you're building a single page application you might want to check out a framework designed to solve this type of problem:
durandal

Can you use PHP? If so there is simple solution.
Your index will be index.php and where you want to have your modal just place this code
<?php include "newTaskModal.html"; ?>

Also you could if you are using JQuery to load your html page into into a matched element.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
Go to http://api.jquery.com/load/ for more info.

STEP 1 Use below code for link:
<a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>
STEP 2 Use below code for modal window
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog model-sm">`enter code here
<div class="modal-content"> </div>
</div>
</div>
STEP 3 Create MyModal.html and place some text.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Modal Contents
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">OK</button>
</div>
Note: This may not work local html. works only on server!

Modal work But not delete data with clicking confirm

I want to delete my data with modal confirmation.on remove click my modal show but when click confirm then data not delete.
I am trying but cant understand whats wrong with my code
my code
<script>
$(document).on("click", "#deleteBtn", function (e) {
e.preventDefault();
e.stopPropagation();
var link = $(this).attr('data-adid');
console.log($("#myModal btn-warning a"));
$("#myModal .btn-warning a").attr('href',link);
$(".modal").modal("show");
});
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Remove Client Account</h4>
</div>
<div class="modal-body">
Body goes here...
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-warning" type="button"> <a href="" >Confirm</a></button>
</div>
</div>
</div>
</div>
<a class="btn btn-warning" id="deleteBtn" data-adid=?a=client&cdid='.$cd[$i][0].' data-toggle="modal" href="#myModal">Remove</a>

I too can't understand what's wrong with your code, but since you want to delete the data attribute, you can do the below.
$(this).removeAttr("data-adid");