I've finished my dapp by deploying the contract to Remix, and it works well in Ganache.

**Now I wanna connect my dapp to Rinkeby by web3.js.** I deployed my contract in Remix, and when I wanna interact with contract, the metamask show the page of paying.

However, when I connect metamask to my dapp page and interact with contract by it, the paying page of metamask didn't show up. 

And I also use `metamask legacy-web3`, the console shows:

[![enter image description here][1]][1]

I've confused of where should I deploy it, and how to connect it?
Should I deploy my contract by `geth` rather than Remix?

the following is my code of `web3.js`

    // Initialize Web3
    web3 = new Web3(web3.currentProvider);
    
    // Set Account
    web3.eth.defaultAccount = 'my account on metamask';
    
    // Set Contract Abi
    var ABI = [abi];
    
    // Set Contract Address
    var contractAddress = 'the address I deployed in Remix';
    
    // Set the Contract
    var contract = new web3.eth.Contract(ABI, contractAddress);


  [1]: https://i.sstatic.net/NyEAs.png