Jump to content

Help with modal pop-up code

Recommended Posts

Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages


I have this code that works when outside of Sq.

The first image shows how it should be; the second how it actually shows on Sq.

Website (Home page): https://butterfly-magnolia-5ta9.squarespace.com/config/pages


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <div class="container">
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Learn More
  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Alex J. Shin</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        <!-- Modal body -->
        <div class="modal-body">
          Throughout the summer of 2021, I was given the opportunity to work for two companies, DASH and CITEK, as well as a Ski Resort Fund. Working under DASH, a co-living business, we furnished an apartment building and set up the utilities and internet services for future residents. Furthermore, we managed the finances to identify all of the ordered, cancelled, and returned purchases. For the Ski Resort Fund, we created a presentation directed at potential investors about a potential Ski Resort fund to aid the struggling ski industry in Japan amidst the COVID-19 pandemic. Our main focus involved research, data analysis, and communication skills to present our findings regarding the market. For CITEK, a construction services company, we developed a homepage for potential clients and learned how to create an engaging and modern interface. From being involved in real world businesses to developing my data management and analysis skills, this internship under ConnectEd U has given me an invaluable experience.
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

Screen Shot 2021-08-13 at 19.57.53.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi. The bootstrap code conflicts with Squarespace code.

above code will cause some problems in edit mode & live mode

Your site is private. Can you setup password & share url again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.