I'm using bootstrap modal to provide a functionality to user to select any desired item and than add the selected item to parent/current page.
I've created an example on fiddle for better and faster understanding.
In eg: there are 2 items (three li for each). When user selects certain item, the modal must close, its price (which is fetched from another page) must be displayed on the square box and a new box must be added to the left side (with current glyphicon).
I somehow understand this must be achieved using jQuery but am blank as to how should I proceed further. I'm totally new to both modals and jQuery so if any one has any idea about it?
UPDATE:
I did try my hands on it and I'm able to fetch the selected item from modal and add to the parent/current view but it doesn't work properly for the second time(second box). Here's updated fiddle. and here's the updated code:
jQuery:
var itemLayout = '<div class="square"><div class="content"><div class="table"><div class="table-cell numbers"><div class="glyphicon glyphicon-plus prices"></div></div></div></div></div>';
$(document).ready(function() {
$(".layout").append(itemLayout);
$(".square").click(function() {
$("#myModal").modal('show');
});
fetchPrice();
});
function fetchPrice() {
var users = $('.prices');
$(document).on('click', '.fetch', function() {
var stylesheet = $(this).text();
console.log(stylesheet);
$("#myModal").modal('hide');
users.removeClass('glyphicon glyphicon-plus').text(stylesheet);
$(itemLayout).insertAfter('.square');
$(".square").click(function() {
$("#myModal").modal('show');
});
});
}
HTML:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="layout"></div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<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">Select to display</h4>
</div>
<!-- modal-header end -->
<div class="modal-body">
<ul class="list-group">
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Chinese</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Hakka Noodles </div>
<div class="pull-right">
<div class="fetch">Price1</div>
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Others</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Masala papad </div>
<div class="pull-right">
<div class="fetch">Price2</div>
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
OLD
Here's the code snippet:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<!-- Button HTML (to Trigger Modal) -->
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
<div class="glyphicon glyphicon-plus"></div>
</div>
</div>
</div>
</div>
<!-- square end -->
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<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">Select to display</h4>
</div>
<!-- modal-header end -->
<div class="modal-body">
<ul class="list-group">
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Chinese</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Hakka Noodles </div>
<div class="pull-right">
Price
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Others</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Masala papad </div>
<div class="pull-right">
Price
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery to open modal:
$(document).ready(function() {
$(".square").click(function() {
$("#myModal").modal('show');
});
});
If you use bootsrap best way make
<div class="square" data-toggle="modal" data-target="#myModal">
for call modal, end do modal header like this
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
On this case u don't need write any jquery its will be work "from box"
Related
I'm trying to open a Bootstrap (5.2) modal with a specific tab selected. The tab should be determined by which button is clicked on the home page ("Login" or "Sign Up").
I tried previous solutions, but they mostly use older versions of Bootstrap.
I'm a complete noob to JavaScript, so if your solution includes it please explain like I'm five.
Here's my HTML:
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }}
{{ log_in_form.email(class="form-control") }}
<br>
{{ log_in_form.password.label(class="form-label")}}
{{ log_in_form.password(class="form-control") }}
<br>
{{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }}
{{ sign_up_form.email(class="form-control") }}
<br>
{{ sign_up_form.password.label(class="form-label")}}
{{ sign_up_form.password(class="form-control") }}
<br>
{{ sign_up_form.confirm_password.label(class="form-label")}}
{{ sign_up_form.confirm_password(class="form-control") }}
<br>
{{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
You can utilize bootstrap events. I think the javascript part is short, so basically listening for event show.bs.modal of the modal (see bootstrap docs) and get the reference to the invoking button event.relatedTarget (see bootstrap docs) which had in the first place an data-tab-id="ID-OF-TAB" attribute. We take that attribute and get a reference to the tab. Finally we use the tabs method show to show the correct tab.
const myModal = document.getElementById('login-signup-modal')
myModal.addEventListener('show.bs.modal', (ev) => {
var invoker = ev.relatedTarget
var selected_tab = invoker.getAttribute("data-tab-id")
const tab_btn = document.querySelector('#' + selected_tab)
const tab = new bootstrap.Tab(tab_btn)
tab.show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" data-tab-id="pills-signup-tab" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" data-tab-id="pills-login-tab" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }} {{ log_in_form.email(class="form-control") }}
<br> {{ log_in_form.password.label(class="form-label")}} {{ log_in_form.password(class="form-control") }}
<br> {{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }} {{ sign_up_form.email(class="form-control") }}
<br> {{ sign_up_form.password.label(class="form-label")}} {{ sign_up_form.password(class="form-control") }}
<br> {{ sign_up_form.confirm_password.label(class="form-label")}} {{ sign_up_form.confirm_password(class="form-control") }}
<br> {{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm using bootstrap 5 i have one modal for login and register but but there is two bootstrap tabs inside one modal and i want to display tab as per button click but this is not working.
When i click on login button then inside modal login tab should be active and if i click on register button then inside modal register tab should be active.
Giving this error in console:-
Uncaught TypeError: Cannot read property 'show' of null
My Code:
$('.register-btn').click(function() {
$('#loginModal').modal('show');
var triggerEl = document.querySelector('[data-bs-target="#register"]')
bootstrap.Tab.getInstance(triggerEl).show()
})
$('.login-btn').click(function() {
$('#loginModal').modal('show');
var triggerE2 = document.querySelector('[data-bs-target="#login"]')
bootstrap.Tab.getInstance(triggerE2).show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for your efforts!
You can trigger the click to simulate clicking the tab.
$(".register-btn").click(function () {
$("#register-tab").trigger("click");
$("#loginModal").modal("show");
});
$(".login-btn").click(function () {
$("#login-tab").trigger("click");
$("#loginModal").modal("show");
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm building a form which gets displayed as a pop up modal when a user clicks "Create Test Case" button. The modal itself contains two tabs. One tab displays form fields for test details and the second tab displays form fields for test properties.
In the first tab "tests" if the user fills out the form and clicks "add test" then the form should trigger back end php processing and write data to MYSQL database. The modal form should close as well. On the other hand, if user clicks the "Properties" tab, it should allow them to add properties dynamically and also insert into mysql database. It should reload the properties page every time a new property is added.
The problem I'm having is that every time I click "Add" on the property page, the Modal window closes.
Can someone tell me how i can get the modal window to reload the properties form page and prevent the modal window from closing each time the Add button is pressed?
Here is my code:
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Test Management <small></small></h3>
</div>
</div>
<div class="clearfix"></div>
<!-- start real -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Add Test Cases <small><?php echo $filenamePrefix; ?></small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p class="text-muted font-13 m-b-30">
Add new test cases to current project.
</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-lg">Create new test case</button>
<!-- begin modal-->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create new test case</h4>
</div>
<div class="modal-body">
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active">Tests
</li>
<li role="presentation" class="">Properties
</li>
</ul>
<form name="variables" id="variables" class="form-horizontal form-label-left" action=<?php echo htmlspecialchars($_SERVER[ "PHP_SELF"]); ?> method="post" enctype="multipart/form-data">
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
<div class="form-group">
<div class="row">
<div class="span col-md-2">
<label>Test Details</label>
<select class="form-control" name="rest_method">
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUST">PUT</option>
</select>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-5">
<button type="submit" class="btn btn-primary">Cancel</button>
<button id="addTests" type="submit" value="true" name="addTests" class="btn btn-success">Add Test</button>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
<div class="form-group">
<div class="row">
<div class="span col-md-4">
<label>Property Name</label>
<input type="text" class="form-control" id="variable_name" name="variable_name">
</div>
<div class="span col-md-2">
<label>Add Properties</label>
<button type="submit" class="btn btn-success" id="addVariables" value="true" name="addVariables">Add</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- end MyyContentTab-->
</div>
</div>
<!-- end modal body -->
</div>
</div>
<!-- end modal -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
I am currently trying to produce a portfolio-style website, and decided to use Bootstrap 3. I want to use modals to display my work from a simple image gallery. I have managed to successfully produce each modal and remote link them, however I run into an issue after opening the second modal. The second modal's content is then the content shown for any subsequent modal called. I have tried using javascript to destroy the modal on each instance of hide, yet it doesn't seem to be working and I can not figure out why. Can someone please tell me what I'm doing wrong?
Gallery:
<div class="banner" id="portfolio"><h2>WORK</h2></div>
<div id="gallery" class="final-tiles-gallery effect-zoom effect-fade-out caption-top caption-bg">
<div class="ftg-items">
<div class="tile">
<a class="tile-inner" data-title="VoodooDesignCo." data-toggle="modal" href="portfolioDIR/voodooDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/voodooDesign.png">
<span class='title'>Voodoo Design Co.</span>
<span class='subtitle'>Logo Design and Branding</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Godzilla (2014) - Poster Design" data-toggle="modal" href="portfolioDIR/godzillaDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/godzillaPoster.png">
<span class='title'>Godzilla (2014)</span>
<span class='subtitle'>Poster Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Iron & Air - Title Design" data-toggle="modal" href="portfolioDIR/ironAirDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/ironAirType.png">
<span class='title'>Iron & Air</span>
<span class='subtitle'>Game Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Aquaman - Title Design" data-toggle="modal" href="portfolioDIR/aquamanDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/aquamanType.png">
<span class='title'>Aquaman</span>
<span class='subtitle'>Movie Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="AllBikes.com.au" data-toggle="modal" href="portfolioDIR/allbikesDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/allbikesWeb.png">
<span class='title'>AllBikes.com.au</span>
<span class='subtitle'>Website Design and Development</span>
</a>
</div>
</div>
</div>
Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal" aria-hidden="true"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
</div>
</div>
</div>
Remote Modal:
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">Iron & Air Title Design - Video Game Concept</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 text-center">
<img src="images/work/ironAirType.png" alt="Iron & Air: Racing Video Game" class="details img-responsive img-center">
<p>Title Design/Typeface Exploration</p>
</div>
<div class="col-sm-6">
<h4>Project Info:</h4>
<p>his project required the typeface design or title design for a game, movie, T.V. show, etc. This design is based on a fictional racing video game, called 'Iron & Air'</p>
<hr>
<p>blah blah blah blah</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
ModalReset JavaScript:
$("#myModal").on('hidden.bs.modal', function () {
$("#myModal").removeClass('fade').modal('hide');
$(this).data('bs.modal', null);
});
I did something similar a while back...
I used one modal and pulled in the content from an external file.
each modal would load new content into the same modal with something like this
$("#info").click(function(){
var url = HOST_NAME+"info/modal-data";
$( "#modal-body" ).load(url, function() {
$( "#modal-body" ).show("slow");
});
loadModal();
});
and open the modal with this
function loadModal() {
$( "#modal-body .page-wrapper" ).remove();
$( "#modal-body" ).hide();
$('#edit').modal();
}
Modal
<div class="modal fade" id="edit" 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>
</div>
<div id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><?=__('modal_close')?></button>
</div>
</div>
</div>
</div>
I have a Twitter Bootstrap list whose items have badged to show the amount of each item. I want to open a modal dialog to edit that amounts. But since it is going to be a long dynamic list, I can't write a function for each badge, but an only function which is able to determine who called the modal and:
Get the actual amount of the caller badge to be shown at the modal
Store the new amount when user changes the modal
HTML:
<div class="panel panel-primary">
<div class="panel-heading">Shopping cart</div>
<div class="panel-body">
<ul id="cart-list" class="list-group">
<li href="#" class="list-group-item" data-type="banana">Bananas
<div class="pull-right"> <span id="badge" class="badge">5</span>
</div>
</li>
<li href="#" class="list-group-item" data-type="pear">Pears
<div class="pull-right"> <span id="badge" class="badge">2</span>
</div>
</li>
</ul>
</div>
</div>
<!-- Input-spinner modal dialog -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="input-group spinner">
<input type="text" class="form-control" value="42">
<div class="input-group-btn-vertical">
<button class="btn btn-default"><i class="fa fa-caret-up"></i>
</button>
<button class="btn btn-default"><i class="fa fa-caret-down"></i>
</button>
</div>
</div> <span class="help-block">Set the number of items</span>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
JS:
// Create shopping cart list
var cart_list_element = document.getElementById("cart-list");
var cart_list = new Sortable(cart_list_element, {
group: {
name: "fruit_group",
pull: true,
put: true
},
});
// Configure click action over the badges
jQuery(".badge").click(function() {
console.log('Clicked badge, showing modal');
$("#myModal").modal('show');
});
// Input-spinner function
(function ($) {
$('.spinner .btn:first-of-type').on('click', function () {
$('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function () {
$('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
});
})(jQuery);
This is a jsfiddle with my attempt. I don't know why the modal does not show up, it works localy. I suppose I made some mistake writting the example, o maybe jsfiddle just don't like modals. Anyway I think it shows what am I trying to achieve.
Any help?
something like this? http://jsfiddle.net/upjy4s5b/
using jquery and formatting your html structure with classes allows you to find different things in relation to other things. calling the bootstrap modal via jquery call instead of the inline call allows for easy transfer of the information you want.
$(document).ready(function() {
$('.edit').on('click', function() {
var name = $(this).closest('.item').find('.name').html();
var count = $(this).closest('.item').find('.count').html();
$('#myModal').find('.modal-body').find('.itemName').html(name);
$('#myModal').find('.modal-body').find('.itemCount').html(count);
$('#myModal').modal('show');
});
});
<ul class="list">
<li class="item">
<span class="name">Item 1</span>
<span class="count">Count 1</span>
Edit
</li>
<li class="item">
<span class="name">Item 2</span>
<span class="count">Count 2</span>
Edit
</li>
<li class="item">
<span class="name">Item 3</span>
<span class="count">Count 3</span>
Edit
</li>
</ul>
<div class="modal fade" id="myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
Name: <span class="itemName"></span>
Count: <span class="itemCount"></span>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->