I want to add popup window on my html page when user click add to cart button. Popupwindow need to be open only when the extra_option flag is yes. Otherwise it should just add the product into the basket (which is fine in my case).
Here is my code.
<form method="post">
<div class="col-md-12 col-sm-12 col-xs-12 pContainer">
<div class="col-md-3 col-sm-3 col-xs-12 wrap">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<img src="img/delivery/products/<?=$r['ImgUrl'];?>" class="img img-responsive" style="width:auto">
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="col-md-9 col-sm-9 col-xs-12 pNameNdiscription">
<h4> <b> <?=$r['ProductName']?> </b> </h4>
<p> <?=$r['Description']?> </p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 wrap" style="float:right" >
<div class="col-md-12 col-sm-12 col-xs-6 priceWrapper">
<h4 style="color:black" class="pPRICE"> <b> Rs. <?=$r['Price']?> </b> </h4>
</div>
<div class="col-md-12 col-sm-12 col-xs-6 add2CartWrapper">
<?php if($r['extra_option'] == 'yes') {
// if extra_option is 'yes' when user click on 'Add To Cart' I want to show here a popup widow to select the extra option. Otherwise just add the product into the cart.
// I am unable to properly add a model/popup windo.
<input type="button" id="ad2cart" name="ad2cart" class="btn add2Cart" value="Add To Cart" onclick='updateCart("<?=$r['id']?>")'>
}
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-xs-12"> <hr> </div>
</div>
I guess you should try bootstrap modal class:
The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. It can be used to display alert popups, videos, and images in a website.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Above code is from: LINK
Explanation of above code:
Bootstrap has build in modal and modal-dialog class which displays popup window.
Further you can divide your popup window in sections. That in done in above code.
In above code there are three sections that are added. There are: header, body and footer.
Based on your need you can divide modal into any number of sections.
Related
The problem is on clicking the item in the popup modal, the data-value is reflecting all the input fields
I have tried this code and it works with that but it is also changing others. The data value should reflect on the particular input field only. currently it is changing all the previous and next input fields
function openmodal(e) {
//prevent(default);
//document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
$('#myModal').modal('show');
$(document).on("click", ".hello", function(event){
event.preventDefault();
e.value=$(this).attr("data-id");
alert(e.value);
$('#myModal').modal('hide');
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2">2</p>
<a class="hello" data-id="3">3</p>
<a class="hello" data-id="4">4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
function openmodal(input) {
$('#myModal').modal('show');
$(".hello").unbind().click(function(event){
$(input).val($(this).attr("data-id"));
$('#myModal').modal('hide');
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="return openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2" >2</p>
<a class="hello" data-id="3" >3</p>
<a class="hello" data-id="4" >4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am stuck in a small but weird problem. I have two modals on my page, I want to load the first modal when the page loads, I have done the code to click a button and open the modal but both the modals come up. It has a effect of opening from left to right, I want to keep that so I had added the class in the jquery code. I just want to load the modal that has the id="ModalLogin". As you can see both the modals load when button is clicked. Below is the snippet. Please help.
$('.btn').click(function() {
$('.modal')
.prop('class', 'modal fade') // revert to default
.addClass($(this).data('direction'));
$('.modal').modal('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://www.topconsumerreviews.com/new-common-code/new-style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<ul class="product-rankings-font" style="list-style: none;padding-left: 18px;padding-bottom: 10px;padding: 10px;">
<li>Select2 </li>
<!-- <li>Activate Modal</li> -->
<li style="text-align: center;padding-top: 5px;"><a class='btn btn-primary btn clos' style="width: 160px;" id="bty" data-direction='left'>bty</a></li>
</ul>
<!---- Forgot Password Popup --->
<div class="modal fade" id="ModalForgotPassword" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Slider 2</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<button class="btn btn-primary">Option 4</button>
</div>
<div class="form-group">
<button class="btn btn-primary">Option 5</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!---- Forgot Password Popup --->
<!---- Login Popup --->
<div class="modal fade" id="ModalLogin" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="font-size: 18px;text-align: center;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">Text Sample 1</h4>
<h4 class="modal-title" style="color: black;">Text Sample 2</h4>
</div>
<div class="modal-body" style="font-size: 16px">
<form action="comparelist.php" method="post">
<ul id="answers-type1" class="myclass" style="list-style: none;padding-right: 10px;padding-left: 10px;">
<li class="module form-check-label" style="background: #668693;" value="Listol" data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"><span>Option 1</span></li>
<li class="module form-check-label" style="background: #668693;"><span>Option 2</span></li>
</ul>
</div>
</div>
</div>
</div>
<!---- Login Popup --->
</body>
</html>
I would like to offer another way to use modals: pure CSS.
here is the reference: click here
The idea is you don't need any js,
each modal will be in a div wrapper with id. like this:
<div id="modalWrapper">
and then you will have a hyperlink where ever you want
<a href="#modalWrapper">
and the trick is with CSS -
you initially set the position of the modal as absolute and unseen (left:-999em)
and then with the target selector, you bring the modal to the center:
#modalWrapper:target {
left:0;
transition:etc..
}
and when you do like this - you will open only the desired modal with the button.
hope this will make some help for you.
my first answer on SO
I've recently been having a problem with modals in Bootsrap 3.
I'm working on a test website (not anything I would actually put on the web) and have 3 pictures (each in a col-md-4) next to each other, and I am planning on having one button centered under each picture which can be clicked for a modal to show up with more info.
I set up the first modal, which worked perfectly.
However, when I added the second one, I found that when you click either button, both modals show up on top of each other, (the second one first) and when you press "Back to home", it goes to the other modal.
You can only go back to home by pressing the "X" one or two times.
I am almost certain that this is due to my JavaScript in <head> being very incorrect, but I am not very good at JS and have no idea what I did wrong...
Here is the html so you can inspect my handiwork:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>space</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#chimechoModal").modal('show');
});
});
</script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#eeveeModal").modal('show');
});
});
</script>
</head>
<body>
<div class="container custom-container">
<div class="row">
<div class="col-xs-12" style="height:15px;"></div>
</div>
<div class="row">
<div class="col-md-6">
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Mini Pokedex</h1>
<h4>Created by spaceman1980</h4>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive center-block" src="images/chimecho.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/eevee.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/james.jpg" style="width: 100%; height: auto;">
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chimecho">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="chimechoModal" tabindex="-1" role="dialog" aria-labelledby="chimechoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="chimechoLabel">The Wind Chime Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Chimecho makes its cries echo inside its hollow body. When this Pokémon becomes enraged, its cries result in ultrasonic waves that have the power to knock foes flying.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eevee">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="eeveeModal" tabindex="-1" role="dialog" aria-labelledby="eeveeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="eeveeLabel">The Evolution Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
1) Even though you are using inline javascript, there is no need to define the <script> tag twice
2) This line in your code says that whenever an element in your DOM with the class 'btn' is clicked it will perform a function (open a modal in your case). You are listening to both the 'btn' elements' click events.
$(".btn").click(function(){
You can assign a different class to each button for each modal type. For example,
<script type="text/javascript">
<button type="button" class="btn btn-primary btn-chimecho" data-toggle="modal" data-target="#chimecho">
<button type="button" class="btn btn-primary btn-eevee" data-toggle="modal" data-target="#eevee">
$(function(){
$(".btn-chimecho").click(function(){
$("#chimechoModal").modal('show');
});
$(".btn-eevee").click(function(){
$("#eeveeModal").modal('show');
});
});
</script>
It's because you're using .btn (a common class shared on both buttons) to trigger the modal. So when you click on any .btn, it fires both modals.
Either add a class/id or use the data-target attribute on your click handler to fire the appropriate modal, or since your button is right before the modal element in your html, you can just use a single click handler with $('.btn') and fire the modal via $(this).next().modal().
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>space</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<script type="text/javascript">
$(function() {
$(".btn").on('click',function() {
$(this).next().modal("show");
});
});
</script>
</head>
<body>
<div class="container custom-container">
<div class="row">
<div class="col-xs-12" style="height:15px;"></div>
</div>
<div class="row">
<div class="col-md-6">
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Mini Pokedex</h1>
<h4>Created by spaceman1980</h4>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive center-block" src="images/chimecho.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/eevee.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/james.jpg" style="width: 100%; height: auto;">
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chimecho">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="chimechoModal" tabindex="-1" role="dialog" aria-labelledby="chimechoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="chimechoLabel">The Wind Chime Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Chimecho makes its cries echo inside its hollow body. When this Pokémon becomes enraged, its cries result in ultrasonic waves that have the power to knock foes flying.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eevee">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="eeveeModal" tabindex="-1" role="dialog" aria-labelledby="eeveeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="eeveeLabel">The Evolution Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Have a look at the below code:
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm">
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="registerPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Register
</h3>
<span id="flipper2">
Login
</span>
</div>
<div class="myPanelBody">
<form id="registerForm">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your name here" />
</div>
<div class="form-group">
<label for="newAuthCode">New Authentication Code</label>
<input type="password" class="form-control" id="newAuthCode" placeholder="New auth code" />
</div>
<div class="form-group">
<label for="clientSecret">Client Secret</label>
<input type="password" class="form-control" id="clientSecret" placeholder="Client secret" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
</div>
</div>
As, you can see..the modal is expected to pop when submit button is clicked in either form. But When I click the submit button in the Login form, nothing happens. I know I have made some mistakes because it was working properly a few hours back then I don't know what I did wrong and now my code is completely broken. The modal window is there to show a loading spinner. In the above code, you can see an anchor element in each Form with text Register and Login respectively. I don't know if it's necessary but I will explain what it does. I want to hide the Login form and show the registration form when Register link is clicked. The registration form also has a button in same manner which hides itself and brings the Login form in visual. The registration form also has a submit button which when clicked, fires the modal.
As I mentioned above, the modal is not popping when submit button from the Login form is clicked. But when I switch to registration form and click Submit there, it fires the modal. The more interesting thing is that when I switch back to the Login form and click submit there, it also shows the modal as expected. In short when the URL changes to myfile.php?#, everything works fine but when it is myfile.php or myfile.php?, I can't fire the Modal from Login form's submit button without switching the form for at least once.
Below code will launch modal window on button click. This is not the code that makes your logic to work but this will just pop up the modal window on button click.
Libraries used: jquery 2.1.1, Bootstrap 3.3.7
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Reference: https://v4-alpha.getbootstrap.com/components/modal/
Give some time to submit the form and to show modal
you are doing same thing at same time, First show the modal and then submit the form
function myFunction()
{
setTimeout(function(){
$("#loginForm").submit(); // if you want
}, 2000);
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
Register
</span>
</div>
<div class="myPanelBody">
<form id="loginForm" >
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button onclick="return myFunction();" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
loading
</div>
</div>
</div>
</div>
</body>
</html>
please any help ?
I'm trying to add popup div to my mobile web app in JQM , but unfortunately the code above doesn't work on my mobile phone , it show the app in tiny at the right corner. but in IE I see it fine.
what i'm doing wrong?
<div data-role="page" id="page2" >
<div data-role="popup" id="popupBasic2" class="ui-content">
Close
</div>
</div>
and my javascript code:
$("#popupBasic2").popup('open');
screenshot:
any suggestions?
Thanks, MOR
I found what cause this happen . it seems that popup doesn't work on <html dir="rtl"> the rtl messed it up..
check if you have <meta name="viewport" content="width=device-width, initial-scale=1"> in your head.
Here is an example my popup:
Delete Bonus
<div data-role="popup" id="popupDelete" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Delete?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">To Delete Bonus?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
u can use "Bootstrap" http://getbootstrap.com/
1. Include it at the beginning of all your projects.
<script type="text/javascript" src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
2. For Example:
<button class="btn btn-success" data-toggle="modal" data-target="#newModal"></button>
->data-target ="#newModal" !! so...find the id named 'newModal'
3. Pop-up
<!-- Modal: there is popup Screen-->
<div class="modal fade" id="newModal" 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">hihihihihi</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="Name" class="col-md-3 control-label">Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="myName" name="myName" maxlength="20">
</div>
</div>
</div><!-- /.modal-body -->
<div class="modal-footer">
<label class="col-md-6 control-label">there is a footer</label>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Like this
Sorry i cant post the image!
u can try this link!! http://images.plurk.com/2Ovvy6BlcrVkFJTGyPLubS.jpg
thx!!