HOW TO CHANGE THIS CODE TO ONLY AFFECT MODAL BUTTON AND NOT THE REST OF PAGE?

CNatural · ‎07-19-2022

Hello, I have coded a modal button below but the styling is affecting my entire page and not only the button. I ONLY want it to affect the modal button. What code can I add so that the font and style of the button is the ONLY thing affected and no other parts of my page are changed?:

<!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.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col text-center">
  <h2></h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">VIEW FULL INGREDIENTS LIST</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">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <p>{{product.metafields.my_fields.ingredients}}</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>

@Sheesh_b

@KetanKumar

@DitalTek

Ajaykaransharma · ‎07-19-2022

Hello again

replace this code instead of that button code

<button id="myBtn" class="btn btn-secondary btn--secondary button" style="
    margin: 0 auto;
    display: table;
">VIEW FULL INGREDIENTS LIST</button>

and for other see this https://prnt.sc/Ha5Qoa8jd7O3

let me know this works

Thanks

If helpful then please Like and Accept Solution.
- Need any custom changes on store Hire me.
- Feel free to contact me on ajaykaran2424@gmail.com for any help
Shopify Partner | Skype : ajaykaransharma24

View solution in original post

CNatural · ‎07-19-2022

Hi @Ajaykaransharma - how do I make the modal centered on the page? Also, can you make the button 2x bigger?

Thank you!

Ajaykaransharma · ‎07-19-2022

Hello @CNatural

can you share the url of site where you add this code? so i can check with.

Thanks

If helpful then please Like and Accept Solution.
- Need any custom changes on store Hire me.
- Feel free to contact me on ajaykaran2424@gmail.com for any help
Shopify Partner | Skype : ajaykaransharma24

CNatural · ‎07-19-2022

@Ajaykaransharma

https://chickysnatural.com/products/chickys-3-in-1-hero-oil

Scroll down and you'll see the button.

Also, when you open the modal I need the content to be on top of the page. Right now when you scroll it goes behind pictures instead of staying on top. Thanks!

Ajaykaransharma · ‎07-19-2022

Hello again

replace this code instead of that button code

<button id="myBtn" class="btn btn-secondary btn--secondary button" style="
    margin: 0 auto;
    display: table;
">VIEW FULL INGREDIENTS LIST</button>

and for other see this https://prnt.sc/Ha5Qoa8jd7O3

let me know this works

Thanks

If helpful then please Like and Accept Solution.
- Need any custom changes on store Hire me.
- Feel free to contact me on ajaykaran2424@gmail.com for any help
Shopify Partner | Skype : ajaykaransharma24

CNatural · ‎07-19-2022

Thank you so much @Ajaykaransharma! Everything works perfectly now! I appreciate your help 🙂

HOW TO CHANGE THIS CODE TO ONLY AFFECT MODAL BUTTON AND NOT THE REST OF PAGE?

HOW TO CHANGE THIS CODE TO ONLY AFFECT MODAL BUTTON AND NOT THE REST OF PAGE?

Community Blog Articles