Opening modal view

1

I have placed an img that opens a modal view in a rectangle. It works fine on desktops but for some reason it doesn’t work on mobiles.

<img src="../contact-chat.png" class="footerModal" style="height:100%;width:100%;" data-toggle="modal" data-target="#myModalContact">

contact.hype.zip (11.3 KB)

New.zip (178.8 KB)

2

The file you have include does not seem to be complete.
How are you expecting a modal view to appear. The file does not include this.?

3

The modal code and JS is on the website. This works perfectly on desktops but not on mobiles.

Here is the modal code:

<div class="modal fade" id="myModalContact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" width="1000px">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <h2 style="color:white;">Contact us.</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="font-size:30px;">x</span></button></br>            
        <span style="margin-left:20px; font-size:12px; color:white;">Don't be shy. Fill out the form below or send us an <a href="mailto:hello@repcardiff.com" target="_top">email.</a></span>

        <div class="line"></div>
        <form class="contact row"  action="../mail/index.php" method="POST" id="subForm">
          <div class="form-group col-xs-12 col-sm-12">
            <label for="exampleInputEmail1 fieldName">What do we call you</label>
            <input id="fieldName" class="form-control" name="name" type="text" placeholder="Name" value=""/>
          </div>
          <div class="form-group col-xs-12 col-sm-6">
            <label for="exampleInputEmail1 fieldEmail">How do we contact you?</label>
            <input id="fieldEmail" name="email"  type="email" class="form-control" placeholder="Email" value="" required>
          </div>
          <div class="form-group col-xs-12 col-sm-6">
            <label for="exampleInputEmail1 fieldilkdulj"></label>
            <input id="fieldilkdulj" name="phone" type="" class="form-control" placeholder="Mobile" value="" required>
          </div>
          <div class="form-group col-xs-12 col-sm-12">
            <label for="exampleInputEmail1 fieldilkdkuj">How can we help you?</label>
            <textarea id="fieldilkdult" name="business" type="text" class="form-control" cols="10" rows="10" placeholder="" value=""></textarea>
          </div>
          
          <div class="form-group">
        <div class="submitbutton col-xs-12 col-sm-12">
          <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
        </div>
      </div>
        </form>
      </div>
    </div>
  </div>
</div>
4

It will be hard for us to figure out for you the problem if you do not include all the components.

I assume that the js is a library that runs and configures the Model. There are probably many that do this…

You need to include this and any other relevant info/component . We are not always able to guess how and what you are doing and do not always have time to recreate projects from scratch. Also as good as some of us are at working out solutions, does not mean that we are familiar with everything that is out there. So including all the info and a working example will help use look and figure out whats going on. We are quick learners… :slight_smile:

6

Sorry, I thought I was just doing something wrong in hype and you only needed the Hype file.

New.zip (178.8 KB)

7

Ok.

I still had to recreate the Hype Project to see the setup. But luckily you included the restorable.

The problem appears to be that iOS will not recognise the <div> (rectangle) for the image as clickable in this case.

So you simply need to place the code
<img src="http://getrep.me/contact/contact-chat.png" class="footerModal" style="height:100%;width:100%;" data-toggle="modal" data-target="#myModalContact">

inside the innerHTML of a Button element.

contact2.zip (82.0 KB)

1 Like