open one modal and disable the other on page load
Question
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><a href="#modal" class="btn go">Activate Modal</a></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><a href="page2.html">Option 2</a></span></li> </ul> </div> </div> </div> </div> <!---- Login Popup ---> </body> </html>
1 answers
solution1
0 2018-10-04 19:25:27
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.